# mota-gesture

Latest version **5.2.4** (published 2023-08-04) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.2.4 |
| Published | 2023-08-04 |
| First published | 2020-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 54.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Houfeng |
| Maintainers | houzhanfeng |

## Links

- npm: https://www.npmjs.com/package/mota-gesture
- npm.io page: https://npm.io/package/mota-gesture

## Dependencies (2)

- [mota](https://npm.io/package/mota.md) <=7.3.8
- [ntils](https://npm.io/package/ntils.md) 5.2.1

## Recent versions

- 5.2.4 (latest) — 2023-08-04
- 5.2.3 — 2022-05-16
- 5.2.2 — 2021-12-27
- 5.2.1 — 2021-09-26
- 5.2.0 — 2021-09-26
- 5.1.6 — 2021-08-27
- 5.1.5 — 2021-06-15
- 5.1.4 — 2021-04-08
- 5.1.3 — 2021-03-16
- 5.1.2 — 2021-03-16
- 5.1.1 — 2021-03-12
- 5.1.0 — 2021-03-12
- 5.0.2 — 2020-12-28
- 5.0.1 — 2020-12-28
- 5.0.0 — 2020-12-10
- … 17 more at https://npm.io/package/mota-gesture/versions

## README

<br/>
<br/>

**此项目已归档，如果有相关需要，请使用 react-finger : [https://github.com/Houfeng/react-finger](https://github.com/Houfeng/react-finger)**

<br/>

# Mota Gesture

Mota Gesture 是基于 Mota 同时兼容 PC & Mobile 的事件扩展，让基于 React + Mota 的移动应用
开发变得更加便捷。

## 基本使用

安装所需依赖，如果已经安装了 react、react-dom、mota，可单独安装 mota-touch，
注意 Mota 版本需要是 `>=4.0.0`

```
npm install react react-dom mota mota-gesture --save
```

在类组件中使用

```jsx
import React from 'react';
import { model } from 'mota';
import { gesture } from 'mota-gesture';

@model(YourModel)
@gesture
export class App extends React.Component {

  onTap = (event)=>{
    console.log('onTap', event);
  };

  render(){
    return <div onTap={this.onTap}></div>
  }

}

```

在函数组件中使用

```jsx
import React from 'react';
import { model } from 'mota';
import { gesture } from 'mota-gesture';

const App = gesture(()=>{
  const onTap = ()=>{
    console.log('onTap', event);
  }
  return <div onTap={onTap}></div>
},{});

```

## 事件支持

Mota Gesture 支持多种常用的手势事件，并且所有事件都自动兼容 PC & Mobile

事件 | 设备 | 说明  
------- | ------- | -------  
onTap | MOBILE & PC | 点击 
onTapHold | MOBILE & PC | 长按  
onDoubleTap | MOBILE & PC | 双击  
onSwipe | MOBILE & PC | 任意滑动
onSwipeUp | MOBILE & PC | 向上滑动 
onSwipeRight | MOBILE & PC | 向右滑动 
onSwipeDown | MOBILE & PC | 向下滑动  
onSwipeLeft | MOBILE & PC | 向左滑动
onPinchStart | MOBILE | 手势开始（两点） 
onPinch | MOBILE | 手势更新
onPinchEnd | MOBILE | 手势结束（两点）
onPointDown | MOBILE & PC | 在按下时
onPointMove | MOBILE & PC | 在移动时
onPointUp |  MOBILE & PC | 在弹起时

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