ReactJS / HammerJS integration. Support touch events in your React app.
JavaScript
Clone or download
Latest commit 14500eb Oct 24, 2017
Permalink
Failed to load latest commit information.
dist Updating build Oct 24, 2017
lib Updating build Oct 24, 2017
src Removing unused react-dom package Oct 24, 2017
.babelrc Updating build system Oct 24, 2017
.editorconfig Project config Nov 14, 2014
.eslintrc.js Updating build system Oct 24, 2017
.gitignore Updating build system Oct 24, 2017
LICENSE v1.0.0 Oct 24, 2017
README.md v1.0.0 Oct 24, 2017
bower.json v1.0.1 Oct 24, 2017
gulpfile.js fixing build to exclude prop-types Oct 24, 2017
package.json v1.0.1 Oct 24, 2017
rollup.config.js Updating build system Oct 24, 2017

README.md

React-HammerJS

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

If you're looking for native tap event handling in ReactJS, check out my 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, 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
<Hammer onTap={handleTap} onSwipe={handleSwipe}><div>Tap Me</div></Hammer>

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

<Hammer onTap={handleTap} options={options}><div>Tap Me</div></Hammer>

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 <Hammer> element.

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

<Hammer
    onPinch={handlePinch}
    options={{
       recognizers: {
          pinch: { enable: true }
       }
    }}>
    <canvas></canvas>
</Hammer>

Disabled events are detailed in the hammer.js api documentation:

License

MIT Licensed. Copyright (c) Jed Watson 2017.