rc-gesture

2020-02-13

rc-gesture

Support gesture for react component

rc-gesture


Support gesture for react component, inspired by hammer.jsand AlloyFinger.

NPM versionbuild statusTest coveragegemnasium depsnode versionnpm download

Screenshots

Features

Install

npm install --save rc-gesture

rc-gesture

Usage

import Gesture from 'rc-gesture';

ReactDOM.render(
  <Gesture
    onTap={(gestureStatus) => { console.log(gestureStatus); }}
  >
    <div>container</div>
  </Gesture>,
container);

API

all callback funtion will have one parammeter: type GestureHandler = (s: IGestureStatus) => void;

  • gesture: the rc-gesture state object, which contain all information you may need, see gesture

props:

common props

nametypedefaultdescription
directionstringallcontrol the allowed gesture direction, could be ['all', 'vertical', 'horizontal']

Tap & Press

nametypedefaultdescription
onTapfunctionsingle tap callback
onPressfunctionlong tap callback
onPressOutfunctionlong tap end callback

Swipe

nametypedefaultdescription
onSwipefunctionswipe callback, will triggered at the same time of all of below callback
onSwipeLeftfunctionswipe left callback
onSwipeRightfunctionswipe right callback
onSwipeTopfunctionswipe top callback
onSwipeBottomfunctionswipe bottom callback

Pan

nametypedefaultdescription
onPanfunctionpan callback, will triggered at the same time of all of below callback
onPanStartfunctiondrag start callback
onPanMovefunctiondrag move callback
onPanEndfunctiondrag end callback
onPanCancelfunctiondrag cancel callback
onPanLeftfunctionpan left callback
onPanRightfunctionpan right callback
onPanTopfunctionpan top callback
onPanBottomfunctionpan bottom callback

Pinch

pinch gesture is not enabled by default, you must set props.enablePinch = trueat first;

nametypedefaultdescription
onPinchfunctionpinch callback, will triggered at the same time of all of below callback
onPinchStartfunctionpinch start callback
onPinchMovefunctionpinch move callback
onPinchEndfunctionpinch end callback
onPanCancelfunctionpinch cancel callback
onPinchInfunctionpinch in callback
onPinchOutfunctionpinch out callback

Rotate

pinch gesture is not enabled by default, you must set props.enableRotate = trueat first;

nametypedefaultdescription
onRotatefunctionrotate callback, will triggered at the same time of all of below callback
onRotateStartfunctionrotate start callback
onRotateMovefunctionrotate move callback
onRotateEndfunctionrotate end callback
onRotateCancelfunctionrotate cancel callback

gesture

// http://hammerjs.github.io/api/#event-object
export interface IGestureStauts {
    /* start status snapshot */
    startTime: number;
    startTouches: Finger[];

    startMutliFingerStatus?: MultiFingerStatus[];

    /* now status snapshot */
    time: number;
    touches: Finger[];

    mutliFingerStatus?: MultiFingerStatus[];

    /* delta status from touchstart to now, just for singe finger */
    moveStatus?: SingeFingerMoveStatus;

    /* whether is a long tap */
    press?: boolean;

    /* whether is a swipe*/
    swipe?: boolean;
    direction?: number;

    /* whether is in pinch process */
    pinch?: boolean;
    scale?: number;

    /* whether is in rotate process */
    rotate?: boolean;
    rotation?: number; // Rotation (in deg) that has been done when multi-touch. 0 on a single touch.
};

Development

npm install
npm start

Example

npm startand then go to http://localhost:8005/examples/

Online examples: http://react-component.github.io/gesture/

Test Case

http://localhost:8005/tests/runner.html?coverage

Coverage

http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage

License

rc-gestureis released under the MIT license.

以上是 rc-gesture 的使用教程帮助文档。


上一篇:react-native-swipeout
下一篇:@types/raf
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部