内容简介：React component to handle swiping on touch devices.Note that in this scenario successful inner swipe will prevent parent swipeables. The preventing is done by calling
swipeable-react
React component to handle swiping on touch devices.
Install
yarn add --save swipeable-react
Usage
import Swipeable from "swipeable-react";
...
class YourOwnComponent extends Component {
render() {
return (
<Swipeable
onSwipeLeft={() => { console.log("swiped left"); }}
onSwipeRight={() => { console.log("swiped right"); }}
>
{innerRef => (
<div ref={innerRef}>
I will detect swiping!
</div>
)}
</Swipeable>
);
}
}
Notes
- Supports both vertical and horizontal swiping.
- Uses
touchstart,touchmoveandtouchendevents - Multiple nested Swipeables are supported.
Note that in this scenario successful inner swipe will prevent parent swipeables. The preventing is done by calling stopPropagation() in the touchend handler.
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 .
Development
The project is built on node v10.15.1 . Set as default in .nvmrc for nvm users.
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
Credits
Non-react swiped-events
License
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
