rc-gesture

---

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

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-gesture.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-gesture
[travis-image]: https://img.shields.io/travis/react-component/gesture.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/gesture
[coveralls-image]: https://img.shields.io/coveralls/react-component/gesture.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/gesture?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/gesture.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/gesture
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-gesture.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-gesture

Screenshots

Features

Install

``bash
npm install --save rc-gesture
`

![rc-gesture](https://npmjs.org/package/rc-gesture)

Usage

`tsx
import Gesture from 'rc-gesture';

ReactDOM.render(
onTap={(gestureStatus) => { console.log(gestureStatus); }}
>



,
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

$3

#### 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

`tsx
// 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.