react-with-gesture

????Bread n butter utility for component-tied mouse/touch gestures in React

 

These demos are real, click them!

npm install react-with-gesture

Ever thought about doing that sidebar pull-out, a view pager, some slider, any gesture on the web basically, and dropped the idea because it’s too hard? In that case, this is your lib.

React-with-gesture is a small utility that lets you bind richer mouse and touch events to any component or view. With the data you receive it becomes trivial to set up gestures, and often takes no more than a few lines of code.

You can use it stand-alone, but to make the most of it you should combine it with an animation library like react-spring, though you can most certainly use any other.

Api

import { useGesture, withGesture, Gesture } from 'react-with-gesture'

The api is straight forward. You can use React-hooks, render-props or higher-order-components. You bind handlers to your view (done for you if you use render-props or hoc’s), and you will receive events when you click/drag/pull/release it. Hooks however are preferred, since they allow gestures to be re-used for more than one view (you can use the same bind() function multiple times!).

// Full config with event handler
const bind = useGesture({ onAction: event => eventHandler, ...config })
return

// Short cut with event handler (becomes onAction + default config) const bind = useGesture(event => eventHandler) return

// Without onAction it will re-render the component on event changes with fresh props const [bind, props] = useGesture({ …config }) return

/* ————————– Render-props and Higher-order-components ————————– */ {event =>

} @withGesture(config) class extends React.Component { render() { const event = this.props.event return


  }
}

withGesture(config)(Component)

Config

{ 
  touch: true,                  // accept touch input
  mouse: true,                  // accept mouse input
  passive: { passive: true },   // event handler 3rd argument input, passive by default
  onAction: undefined           // event => eventHandler, respond to events outside Reacts render cycle
}

Event data

{
  event,                        // source event
  target,                       // dom node
  time,                         // time tag
  initial,                      // click coordinates (vec2)
  xy,                           // page coordinates (vec2)
  previous,                     // previous page coordinates (vec2)
  delta,                        // delta offset (xy - initial) (vec2)
  direction,                    // direction normal (vec2)
  local,                        // delta with book-keeping (vec2)
  velocity,                     // drag momentuum / speed
  distance,                     // delta distance
  down,                         // mouse / touch down
  first,                        // marks first event (mouse / touch down)
  args,                         // arguments optionally passed to bind(a,b,c,d,..)
  temp,                         // arguments optionally returned by onActions eventHandler
}

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares