Support gesture for react component
npm install rc-gestureSupport 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
``bash`
npm install --save rc-gesture

`tsx
import Gesture from 'rc-gesture';
ReactDOM.render(
>
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?coverageCoverage
http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverageLicense
rc-gesture` is released under the MIT license.