rmc-gesture

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.