JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 25271
  • Score
    100M100P100Q140115F
  • License MIT

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

Package Exports

  • react-hammerjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-hammerjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-HammerJS

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

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 generates a React component (default <span>) which then has Hammer events bound to it so it can fire the handlers specified.

Properties

The component prop can be used to change the component rendered, which will have the touch events bound to it. It may be a string (any valid DOM tag) or a React component that implements the getDOMNode() method.

The following events are supported:

  • onTap
  • onDoubleTap
  • onPan
  • onSwipe
  • onPress
  • onPinch
  • onRotate

You can also provide an action property which is like the onTap event handler but will also be fired onPress.

Example

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

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