JarCastingReact-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
onTaponDoubleTaponPanonPanCancelonPanEndonPanStartonPinchonPinchCancelonPinchEndonPinchInonPinchOutonPinchStartonPressonPressUponRotateonRotateCancelonRotateEndonRotateMoveonRotateStartonSwipeaction- like theonTapevent handler but will also be firedonPress.
Behavior properties
-
direction- (string)'DIRECTION_ALL'|'DIRECTION_HORIZONTAL'|'DIRECTION_VERTICAL'. Used to restrict thepanandswipedirection. 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.