gem-hunter
Language: JavaScript
ReactJS / HammerJS integration. Support touch events in your React app.
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.
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
React-HammerJS wraps a React component, binding Hammer events to it so it can fire the handlers specified.
onTaponDoubleTaponPanonPanCancelonPanEndonPanStartonPinchonPinchCancelonPinchEndonPinchInonPinchOutonPinchStartonPressonPressUponRotateonRotateCancelonRotateEndonRotateMoveonRotateStartonSwipeaction - like the onTap event handler but will also be fired onPress.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.
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>
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:
MIT Licensed. Copyright (c) Jed Watson 2017.