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={(gestureStatus) => { console.log(gestureStatus); }}
>
<div>container</div>
</Gesture>,
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
export interface IGestureStauts {
startTime: number;
startTouches: Finger[];
startMutliFingerStatus?: MultiFingerStatus[];
time: number;
touches: Finger[];
mutliFingerStatus?: MultiFingerStatus[];
moveStatus?: SingeFingerMoveStatus;
press?: boolean;
swipe?: boolean;
direction?: number;
pinch?: boolean;
scale?: number;
rotate?: boolean;
rotation?: number;
};
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.