# rmc-gesture

> react mobile component gesture ui component for react

Latest version **1.0.5** (published 2016-05-31) · 0 weekly downloads

## Install

```sh
npm install rmc-gesture
pnpm add rmc-gesture
yarn add rmc-gesture
bun add rmc-gesture
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2016-05-31 |
| First published | 2016-05-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | qiuyuntao@foxmail.com |
| Maintainers | qiuyuntao |
| Keywords | react, react-component, react-mobile-component-gesture, rmc-gesture |

## Links

- npm: https://www.npmjs.com/package/rmc-gesture
- Repository: https://github.com/react-component/m-gesture
- Issues: https://github.com/react-component/m-gesture/issues
- npm.io page: https://npm.io/package/rmc-gesture

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.2.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2016-05-31
- 1.0.4 — 2016-05-31
- 1.0.3 — 2016-05-30
- 1.0.2 — 2016-05-30
- 1.0.1 — 2016-05-30
- 1.0.0 — 2016-05-30

## README

# rmc-gesture
---

React Mobile Component Gesture


[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
[![Sauce Test Status](https://saucelabs.com/buildstatus/rmc-gesture)](https://saucelabs.com/u/rmc-gesture)

[![Sauce Test Status](https://saucelabs.com/browser-matrix/rmc-gesture.svg)](https://saucelabs.com/u/rmc-gesture)

[npm-image]: http://img.shields.io/npm/v/rmc-gesture.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rmc-gesture
[travis-image]: https://img.shields.io/travis/react-component/rmc-gesture.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/rmc-gesture
[coveralls-image]: https://img.shields.io/coveralls/react-component/rmc-gesture.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/rmc-gesture?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/rmc-gesture.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/rmc-gesture
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rmc-gesture.svg?style=flat-square
[download-url]: https://npmjs.org/package/rmc-gesture

## Screenshots

<img src="" width="288"/>


## Development

```
npm install
npm start
```

## Example

http://localhost:8000/examples/

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


## install


[![rmc-gesture](https://nodei.co/npm/rmc-gesture.png)](https://npmjs.org/package/rmc-gesture)


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

```js
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`.

```js
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.

---
_Source: https://npm.io/package/rmc-gesture · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._