rc-gesture
v0.0.22
Published
Support gesture for react component
Downloads
90,254
Readme
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
Tap & Press
Swipe
Pan
Pinch
pinch gesture is not enabled by default, you must set props.enablePinch = true
at first;
Rotate
pinch gesture is not enabled by default, you must set props.enableRotate = true
at first;
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.