yarn add swipeable-react
import Swipeable from "swipeable-react";
...
function YourOwnComponent(props) {
return (
<Swipeable
onSwipeLeft={() => { console.log("swiped left"); }}
onSwipeRight={() => { console.log("swiped right"); }}
onSwipeUp={() => { console.log("swiped up"); }}
onSwipeDown={() => { console.log("swiped down"); }}
>
{innerRef => (
<div ref={innerRef}>
I will detect swiping!
</div>
)}
</Swipeable>
);
}Then it's up to you on how to react on these swiping events.
Sliding on horizontal/vertical swipe
| Prop | Type | Default | Description |
|---|---|---|---|
| children | function | Function that passes the ref down to the DOM element which will get touch events attached to. | |
| minDistance | number | 20 | min distance in px between touchstart and touchend |
| maxDistance | number | Infinity | max distance in px between touchstart and touchend |
| timeout | number | 500 | the time in ms between touchstart and touchend |
| onSwipeLeft | function | handler for successful swipe left | |
| onSwipeRight | function | handler for successful swipe right | |
| onSwipeUp | function | handler for successful swipe up | |
| onSwipeDown | function | handler for successful swipe down |
* All props are optional except the children.
- Supports both vertical and horizontal swiping.
- Uses
touchstart,touchmoveandtouchendevents - Multiple nested Swipeables are supported.
In the last scenario successful nested swipe will prevent triggering parent swipeables. That is done by calling stopPropagation() inside touchend handler.
Swipeable has been rewritten using React hooks ↩ as per v2.0.0.
In order to work properly any consumer project should have version of react >= 16.8.0 (when hooks were introduced officially).
If hooks are not an option try Swipeable v1.3.0 which is using classes and depends on react >= 15.5.0.
The code is built on node v10.15.1. Set as default in .nvmrc for nvm users.
nvm use
yarn
Tests run in jest --watch mode:
yarn test
Deploying by:
yarn build
That will create a lib/ folder with index.js file containing transpiled code from the src/Swipeable.js component
Contribution is always welcome in the form of new features, bug fixes, ideas or simply tweeting about Swipeable. Check the relevant guides here.
Non-react swiped-events by John Doherty