react-hammerjs
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-hammerjs package

    1.0.1 • Public • Published

    React-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

    • onTap
    • onDoubleTap
    • onPan
    • onPanCancel
    • onPanEnd
    • onPanStart
    • onPinch
    • onPinchCancel
    • onPinchEnd
    • onPinchIn
    • onPinchOut
    • onPinchStart
    • onPress
    • onPressUp
    • onRotate
    • onRotateCancel
    • onRotateEnd
    • onRotateMove
    • onRotateStart
    • onSwipe
    • action - like the onTap event handler but will also be fired onPress.

    Behavior properties

    • 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.

    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.

    Install

    npm i react-hammerjs

    DownloadsWeekly Downloads

    27,153

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar