Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jedwatson/react-hammerjs

ReactJS / HammerJS integration. Support touch events in your React app.
https://github.com/jedwatson/react-hammerjs

Last synced: 24 days ago
JSON representation

ReactJS / HammerJS integration. Support touch events in your React app.

Host: GitHub
URL: https://github.com/jedwatson/react-hammerjs
Owner: JedWatson
License: mit
Created: 2014-11-14T03:42:48.000Z (about 10 years ago)
Default Branch: master
Last Pushed: 2021-07-18T10:43:08.000Z (over 3 years ago)
Last Synced: 2024-10-16T09:12:12.725Z (about 1 month ago)
Language: JavaScript
Size: 544 KB
Stars: 937
Watchers: 23
Forks: 128
Open Issues: 49
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

React-HammerJS
==============

[ReactJS](http://facebook.github.io/react/) / [HammerJS](http://hammerjs.github.io) integration. Support touch events in your React app.

If you're looking for native tap event handling in ReactJS, check out my [react-tappable](https://github.com/JedWatson/react-tappable) package.

## Installation

The easiest way to use React-HammerJS is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), etc).

You can also use the standalone build by including `dist/hammer.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.

```
npm install react-hammerjs --save
```

## Usage

React-HammerJS wraps a React component, binding Hammer events to it so it can fire the handlers specified.

## Properties

### Event Listener properties
* `onTap`
* `onDoubleTap`
* `onPan`
* `onPanCancel`
* `onPanEnd`
* `onPanStart`
* `onPinch`
* `onPinchCancel`
* `onPinchEnd`
* `onPinchIn`
* `onPinchOut`
* `onPinchStart`
* `onPress`
* `onPressUp`
* `onRotate`
* `onRotateCancel`
* `onRotateEnd`
* `onRotateMove`
* `onRotateStart`
* `onSwipe`
* `action` - like the `onTap` event handler but will also be fired `onPress`.

### Behavior properties
* `direction` - (string) `'DIRECTION_ALL'` | `'DIRECTION_HORIZONTAL'` | `'DIRECTION_VERTICAL'`. Used to restrict the `pan` and `swipe` direction. These string values may also work: `'DIRECTION_NONE'` |`'DIRECTION_LEFT'` | `'DIRECTION_RIGHT'` | `'DIRECTION_UP'` | `'DIRECTION_DOWN'`.

* `options` - can be used to configure the Hammer manager. These properties will be merged with the default ones.

### Example

```
var Hammer = require('react-hammerjs');

// Default options

Tap Me

// Custom options
var options = {
touchAction:'compute',
recognizers: {
tap: {
time: 600,
threshold: 100
}
}
};

Tap Me

```

# Disabled Events

As a default, the `pinch` and `rotate` events are disabled in hammer.js, as they would make actions on an element "blocking". You may enable these events using the options object which is a attribute on the react `` element.

For example, to activate the `pinch` event on a `canvas` element:

```

Disabled events are detailed in the hammer.js api documentation:
- http://hammerjs.github.io/recognizer-rotate/
- http://hammerjs.github.io/recognizer-pinch/

# License