内容简介: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
,touchmove
andtouchend
events - 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
企业应用架构模式
Martin Fowler / 王怀民、周斌 / 机械工业出版社 / 2010-4 / 59.00元
《企业应用架构模式》作者是当今面向对象软件开发的权威,他在一组专家级合作者的帮助下,将40多种经常出现的解决方案转化成模式,最终写成这本能够应用于任何一种企业应用平台的、关于解决方案的、不可或缺的手册。《企业应用架构模式》获得了2003年度美国软件开发杂志图书类的生产效率奖和读者选择奖。《企业应用架构模式》分为两大部分。第一部分是关于如何开发企业应用的简单介绍。第二部分是《企业应用架构模式》的主体......一起来看看 《企业应用架构模式》 这本书的介绍吧!