https://github.com/react-component/gesture
Support gesture for react component.
https://github.com/react-component/gesture
Last synced: 4 months ago
JSON representation
Support gesture for react component.
- Host: GitHub
- URL: https://github.com/react-component/gesture
- Owner: react-component
- License: mit
- Created: 2017-07-19T09:30:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-07-27T21:16:10.000Z (over 4 years ago)
- Last Synced: 2025-08-09T04:31:18.020Z (5 months ago)
- Language: TypeScript
- Homepage: https://react-component.github.io/gesture/
- Size: 973 KB
- Stars: 103
- Watchers: 17
- Forks: 11
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
README
# rc-gesture
---
Support gesture for react component, inspired by [hammer.js](https://github.com/hammerjs/hammer.js) and [AlloyFinger](https://github.com/AlloyTeam/AlloyFinger).
[![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]
[npm-image]: http://img.shields.io/npm/v/rc-gesture.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-gesture
[travis-image]: https://img.shields.io/travis/react-component/gesture.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/gesture
[coveralls-image]: https://img.shields.io/coveralls/react-component/gesture.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/gesture?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/gesture.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/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/rc-gesture.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-gesture
## Screenshots
## Features
## Install
```bash
npm install --save rc-gesture
```
[](https://npmjs.org/package/rc-gesture)
## Usage
```tsx
import Gesture from 'rc-gesture';
ReactDOM.render(
{ console.log(gestureStatus); }}
>
container
,
container);
```
## API
all callback funtion will have one parammeter: `type GestureHandler = (s: IGestureStatus) => void;`
- gesture: the rc-gesture state object, which contain all information you may need, see [gesture](#gesture)
### props:
#### common props
name
type
default
description
direction
string
`all`
control the allowed gesture direction, could be `['all', 'vertical', 'horizontal']`
#### Tap & Press
name
type
default
description
onTap
function
single tap callback
onPress
function
long tap callback
onPressOut
function
long tap end callback
#### Swipe
name
type
default
description
onSwipe
function
swipe callback, will triggered at the same time of all of below callback
onSwipeLeft
function
swipe left callback
onSwipeRight
function
swipe right callback
onSwipeTop
function
swipe top callback
onSwipeBottom
function
swipe bottom callback
#### Pan
name
type
default
description
onPan
function
pan callback, will triggered at the same time of all of below callback
onPanStart
function
drag start callback
onPanMove
function
drag move callback
onPanEnd
function
drag end callback
onPanCancel
function
drag cancel callback
onPanLeft
function
pan left callback
onPanRight
function
pan right callback
onPanTop
function
pan top callback
onPanBottom
function
pan bottom callback
#### Pinch
pinch gesture is not enabled by default, you must set `props.enablePinch = true` at first;
name
type
default
description
onPinch
function
pinch callback, will triggered at the same time of all of below callback
onPinchStart
function
pinch start callback
onPinchMove
function
pinch move callback
onPinchEnd
function
pinch end callback
onPanCancel
function
pinch cancel callback
onPinchIn
function
pinch in callback
onPinchOut
function
pinch out callback
#### Rotate
pinch gesture is not enabled by default, you must set `props.enableRotate = true` at first;
name
type
default
description
onRotate
function
rotate callback, will triggered at the same time of all of below callback
onRotateStart
function
rotate start callback
onRotateMove
function
rotate move callback
onRotateEnd
function
rotate end callback
onRotateCancel
function
rotate cancel callback
## gesture
```tsx
// http://hammerjs.github.io/api/#event-object
export interface IGestureStauts {
/* start status snapshot */
startTime: number;
startTouches: Finger[];
startMutliFingerStatus?: MultiFingerStatus[];
/* now status snapshot */
time: number;
touches: Finger[];
mutliFingerStatus?: MultiFingerStatus[];
/* delta status from touchstart to now, just for singe finger */
moveStatus?: SingeFingerMoveStatus;
/* whether is a long tap */
press?: boolean;
/* whether is a swipe*/
swipe?: boolean;
direction?: number;
/* whether is in pinch process */
pinch?: boolean;
scale?: number;
/* whether is in rotate process */
rotate?: boolean;
rotation?: number; // Rotation (in deg) that has been done when multi-touch. 0 on a single touch.
};
```
## Development
```
npm install
npm start
```
## Example
`npm start` and then go to `http://localhost:8005/examples/`
Online examples: [http://react-component.github.io/gesture/](http://react-component.github.io/gesture/)
## Test Case
`http://localhost:8005/tests/runner.html?coverage`
## Coverage
`http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage`
## License
`rc-gesture` is released under the MIT license.