ReactJS / HammerJS integration. Support touch events in your React app.
npm install @win11react/react-hammerjsReact-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.
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 @win11react/react-hammerjs --save
React-HammerJS wraps a React component, binding Hammer events to it so it can fire the handlers specified.
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* - like the onTap event handler but will also be fired onPress.$3
* 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.$3
`
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
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:`
options={{
recognizers: {
pinch: { enable: true }
}
}}>
Disabled events are detailed in the hammer.js api documentation:
- http://hammerjs.github.io/recognizer-rotate/
- http://hammerjs.github.io/recognizer-pinch/
MIT Licensed. Copyright (c) Jed Watson 2017.