rmc-gesture

React Mobile Component Gesture

Screenshots

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/rmc-gesture/

install

Usage

rmc-gesture is a react gesture component for mobile. You can use it as a container, and then it will have some gesture event which you can use.

var MGesture = require('rmc-gesture');
var React = require('react');

function longTap() {
  console.log('longTap');
}

function doubleTap() {
  console.log('doubleTap');
}


React.render(
  <MGesture
    className="container"
    onLongTap={longTap}
    onDoubleTap={doubleTap}
  />,
  container
);

If you just want to use some gesture, not all. You can use the Drag MultipleTap Pinch or Swipe instand of using rmc-gesutre.

import MGesture,
  {MultipleTap, Drag, Swipe, Pinch} from 'rmc-gesture';
var React = require('react');

function longTap() {
  console.log('longTap');
}

function doubleTap() {
  console.log('doubleTap');
}

// only use MultipleTap event
React.render(
  <MultipleTap
    className="container"
    onLongTap={longTap}
    onDoubleTap={doubleTap}
  />,
  container
);

// only use Swipe event
React.render(
  <Swipe
    className="container"
    onSwipe={() => console.log('swipe')}
  />,
  container
);

API

props

| 属性 | 说明 | 类型 | 默认值 | |-------------|------------------------|--------|------------| | className | set class name | String | '' | | onLongTap | long tap | Function | function() {} | | onDoubleTap | double tap | Function | function() {} | | onPinchStart | start pinch | Function | function() {} | | onPinch | pinching | Function | function() {} | | onPinchIn | pinch in | Function | function() {} | | onPinchOut | pinch out | Function | function() {} | | onPinchEnd | pinch end | Function | function() {} | | onSwipe | swipe | Function | function() {} | | onSwipeDown | swipe down | Function | function() {} | | onSwipeUp | swipe up | Function | function() {} | | onSwipeRight | swipe right | Function | function() {} | | onSwipeLeft | swipe left | Function | function() {} | | onDragStart | start drag | Function | function() {} | | onDragEnd | drag end | Function | function() {} | | onDrag | dragging | Function | function() {} |

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-gesture is released under the MIT license.