Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rc-gesture

Package Overview
Dependencies
Maintainers
2
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-gesture

Support gesture for react component

  • 0.0.22
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
22K
increased by0.27%
Maintainers
2
Weekly downloads
 
Created
Source

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
nametypedefaultdescription
directionstring`all`control the allowed gesture direction, could be `['all', 'vertical', 'horizontal']`
Tap & Press
nametypedefaultdescription
onTapfunctionsingle tap callback
onPressfunctionlong tap callback
onPressOutfunctionlong tap end callback
Swipe
nametypedefaultdescription
onSwipefunctionswipe callback, will triggered at the same time of all of below callback
onSwipeLeftfunctionswipe left callback
onSwipeRightfunctionswipe right callback
onSwipeTopfunctionswipe top callback
onSwipeBottomfunctionswipe bottom callback
Pan
nametypedefaultdescription
onPanfunctionpan callback, will triggered at the same time of all of below callback
onPanStartfunctiondrag start callback
onPanMovefunctiondrag move callback
onPanEndfunctiondrag end callback
onPanCancelfunctiondrag cancel callback
onPanLeftfunctionpan left callback
onPanRightfunctionpan right callback
onPanTopfunctionpan top callback
onPanBottomfunctionpan bottom callback
Pinch

pinch gesture is not enabled by default, you must set props.enablePinch = true at first;

nametypedefaultdescription
onPinchfunctionpinch callback, will triggered at the same time of all of below callback
onPinchStartfunctionpinch start callback
onPinchMovefunctionpinch move callback
onPinchEndfunctionpinch end callback
onPanCancelfunctionpinch cancel callback
onPinchInfunctionpinch in callback
onPinchOutfunctionpinch out callback
Rotate

pinch gesture is not enabled by default, you must set props.enableRotate = true at first;

nametypedefaultdescription
onRotatefunctionrotate callback, will triggered at the same time of all of below callback
onRotateStartfunctionrotate start callback
onRotateMovefunctionrotate move callback
onRotateEndfunctionrotate end callback
onRotateCancelfunctionrotate 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.

Keywords

FAQs

Package last updated on 12 Jun 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc