rc-gesture
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.22 • Public • Published

    rc-gesture


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

    NPM version build status Test coverage gemnasium deps node version npm download

    Screenshots

    Features

    Install

    npm install --save rc-gesture

    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

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

    Install

    npm i rc-gesture

    DownloadsWeekly Downloads

    34,252

    Version

    0.0.22

    License

    MIT

    Unpacked Size

    280 kB

    Total Files

    19

    Last publish

    Collaborators

    • paranoidjk
    • quentinyang1985