rc-gesture

rc-gesture

---

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

Screenshots

Features

Install

npm install --save rc-gesture

Usage

import Gesture from 'rc-gesture';

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

API

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

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

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.