swipeable-react
swipeable-react copied to clipboard
moubi
Simple react component for swipe events on touch 📲
Install
yarn add swipeable-react
Usage
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.
Basic example
Sliding on horizontal/vertical swipe
API
| 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.
Notes
- 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.
Requirements ✅
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.
Development
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
Contributing
Contribution is always welcome in the form of new features, bug fixes, ideas or simply tweeting about Swipeable. Check the relevant guides here.
Credits
Non-react swiped-events by John Doherty
Product card design by Virgil Pana
License
MIT License
moubi