rc-gesture
Support gesture for react component, inspired by hammer.js and AlloyFinger.
Screenshots
Features
Install
npm install --save rc-gesture
Usage
; ReactDOM.render ,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
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;
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.