rc-gesture@0.0.22

EXAMPLES

README.md

rc-gesture

Support gesture for react component, inspired by hammer.js and AlloyFinger.

NPM version build status Test coverage gemnasium deps node version npm 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;

props:

common props

name type default description
direction string all control the allowed gesture direction, could be ['all', 'vertical', 'horizontal']

Tap & Press

name type default description
onTap function single tap callback
onPress function long tap callback
onPressOut function long tap end callback

Swipe

name type default description
onSwipe function swipe callback, will triggered at the same time of all of below callback
onSwipeLeft function swipe left callback
onSwipeRight function swipe right callback
onSwipeTop function swipe top callback
onSwipeBottom function swipe bottom callback

Pan

name type default description
onPan function pan callback, will triggered at the same time of all of below callback
onPanStart function drag start callback
onPanMove function drag move callback
onPanEnd function drag end callback
onPanCancel function drag cancel callback
onPanLeft function pan left callback
onPanRight function pan right callback
onPanTop function pan top callback
onPanBottom function pan bottom callback

Pinch

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

name type default description
onPinch function pinch callback, will triggered at the same time of all of below callback
onPinchStart function pinch start callback
onPinchMove function pinch move callback
onPinchEnd function pinch end callback
onPanCancel function pinch cancel callback
onPinchIn function pinch in callback
onPinchOut function pinch out callback

Rotate

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

name type default description
onRotate function rotate callback, will triggered at the same time of all of below callback
onRotateStart function rotate start callback
onRotateMove function rotate move callback
onRotateEnd function rotate end callback
onRotateCancel function rotate 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 start and 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-gesture is released under the MIT license.

Fork me on GitHub