React-HammerJS

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

Installation

npm install mff-hammer --save

or

yarn add mff-hammer

Usage

React-HammerJS wraps a React component, binding Hammer events to it so it can fire the handlers specified.

Properties

The following events are supported:

• onTap
• onDoubleTap
• onPan
• onPanCancel
• onPanEnd
• onPanStart
• onPinch
• onPinchCancel
• onPinchEnd
• onPinchIn
• onPinchOut
• onPinchStart
• onPress
• onPressUp
• onRotate
• onRotateCancel
• onRotateEnd
• onRotateMove
• onRotateStart
• onSwipe

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

If you provide the prop direction the pan and swipe events will support Hammer.DIRECTION_(NONE/LEFT/RIGHT/UP/DOWN/HORIZONTAL/VERTICAL/ALL).

The options property can be used to configure the Hammer manager. These properties will be merged with the default ones.

Example

var Hammer = require('mff-hammer');

// 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:

• http://hammerjs.github.io/recognizer-rotate/
• http://hammerjs.github.io/recognizer-pinch/

License

MIT Licensed. Copyright (c) MFF 2017.