![](\"assets/button.gif\")
\n\n \n
\n \n
\n ![](\"https://i.imgur.com/tg1mN1F.gif\")
\n
\n ![](\"https://i.imgur.com/OxGLHeT.gif\")
\n ![](\"https://i.imgur.com/ifdCBvG.gif\")
\n
\n These demos are real, click them!\n
\n\n```\nnpm install react-with-gesture\n```\n\nEver 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.\n\nReact-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.\n \nYou can use it stand-alone, but to make the most of it you should combine it with an animation library like [react-spring](https://github.com/react-spring/react-spring), though you can most certainly use any other.\n\n### Api\n\n```js\nimport { useGesture, withGesture, Gesture } from 'react-with-gesture'\n```\n\nThe 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!).\n\n```jsx\n// Full config with event handler\nconst bind = useGesture({ onAction: event => eventHandler, ...config })\nreturn \n\n// Short cut with event handler (becomes onAction + default config)\nconst bind = useGesture(event => eventHandler)\nreturn \n\n// Without onAction it will re-render the component on event changes with fresh props\nconst [bind, props] = useGesture({ ...config })\nreturn \n```\n\n#### Render-props and Higher-order-components\n\n```js\nrender() {\n return (\n\n ![](\"https://i.imgur.com/ooNu3jz.gif\")
\n
\n ![](\"https://i.imgur.com/KDeJBqp.gif\")
\n
\n ![](\"https://i.imgur.com/JyeQsEI.gif\")
\n