Rmc-gesture NPM

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() {}`