In src/Hammer.js:

function updateHammer (hammer, props) {
        if (props.hasOwnProperty('vertical')) {
                console.warn('vertical is deprecated, please use `direction` instead');
        }

        var directionProp = props.direction;
        if (directionProp || props.hasOwnProperty('vertical')) {
                direction = directionProp ? directionProp : (props.vertical ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL');

so it's creating a global window.direction variable, which is a bug.

Here is my code:

render () {
    return (
      <div className="mapBox">
        <Hammer component="div" 
          onPinch = { this.pinchHandler.bind(this) }
          onRotate={ this.rotateHandler.bind(this) }
          options={ options }>
          <div id="svgMap" className="svg-map" style={ stype } ref="svgMap"></div>
        </Hammer>
      </div>
    )
}

but the pinchHandler and the rotateHandler don't run

is there have some question ?

I'm using:

"react": "15.0.1",
"react-dom": "15.0.1",
"react-hammerjs": "1.0.1",

Everything works like a charm, but I get the following error in console:

Warning: Failed propType: Calling PropTypes validators directly is not supported 
by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. 
Read more at http://fb.me/use-check-prop-types Check the render method of X

As described in above documentation:

You might be seeing this message because a component library has updated 
to use prop-types package, but your version of React is incompatible with it.

Since Hammer object is not exposed it's impossible to use constants defined on it (without using a hack).

See issue: hammerjs/hammer.js#864

I think this is a better place

This would be far more valuable as a mixin, so you can use it with arbitrary components, instead of having to wrap them in a component.

any events like onpress is not working on safari

I use onPanMove to implement a drag feature and it works perfectly in mostly case.
But with React Devtool, the returned e.deltaX and e.deltaY become very strange (nearly out of document) and soon lose focus and trigger onPanEnd.

Im not sure what I encounter is a very special case or a common case :(

It is not clear that direction props should be a string of value:
DIRECTION_VERTICAL
or
DIRECTION_HORIZONTAL
or
etc...

Sorry, if its obvious , I am just unclear. I see that this library supports onTap event and you also have React-Tappable that does.

I am a collaborator on https://www.github.com/stoeffel/react-motion-drawer and we depend on this project. You recently merged the update to allow React 16 to work, but there hasn't been a new release yet! Is there any way you can create a new tag and publish to npm? What other changes were you planning for the next release?

Great work on this! Can you please also add PinchEnd support? I'm not a Git user so I can't contribute myself.

As of React 15.5, createClass is deprecated, so using this library prints the following in the console:

Warning: Hammer: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Hammer should either switch to using create-react-class or use plain JavaScript classes.

Hammerjs troughs 'ReferenceError: window is not defined' when rendering React on the server. The problem seems to lie in the hammer.js wrapper.

react-hammerjs/node_modules/hammerjs/hammer.js:2463
})(window, document, 'Hammer');
ReferenceError: window is not defined

I use this as a quick fix in Hammer.js, but doubt if this is the right solution for this?

if (typeof window !== 'undefined') {
  var  Hammer = require('hammerjs');
}

Doesn’t this mess up React’s virtual DOM?

https://github.com/hammerjs/hammer.js/blob/82dc62322ffeb7abf731ba6e3465239f581d2f3b/src/touchaction.js#L36

This is a fairly good component. Thank you very much!

I was wondering, how would I go if I wanted to implement onSwipeLeft for this component?

below is the code I'm currently using, onPress seems not fired.
when I change onPress to onPan, everything works fine.
Is that a bug?

`

		<Hammer onSwipe={this.onSwipe}>  
			<div className="flex-column">  
				<div className="txt-ctrl">当前房间<br/><br/>xxxx 5幢 0602室 <em className="icon_down"></em></div>  
				<div className="flex2"></div>  
				<div className="ctrl-name">大门</div>  
				<Hammer className="btn-wrapper" onPress={this.onPress}>  
					<div>  
						<div id="v_locked" className="loc-wrapper locked"></div>  
						<div id="v_finger" className="loc-wrapper finger hide">  
							<img className="img_fingerprint" src="img/touch.gif" alt=""/>  
						</div>  
					</div>  
				</Hammer>  
				<div className="ctrl-name-small">长按1秒开锁</div>  
				<div className="flex1"></div>  
				<div className="flex1"></div>  
			</div>  
		</Hammer>

`

ReactDOM is installed and found, but it does not have an method findDOMNode.

componentDidMount: function () {
        this.hammer = new Hammer(ReactDOM.findDOMNode(this));
        updateHammer(this.hammer, this.props);
},

At the moment listening for pan events won't allow you to detect when the panning has started since eventType doesn't pass through an INPUT_START.

It seems the typical approach would be to check the event.type field - see hammer #685. So a potential solution might be to change the pass event registration to if (this.props.onPan) this.hammer.on('panstart pan', this.props.onPan);, allowing React code to check the event.type field?

I can't find a way to persist the hammer events to circumvent event pooling.

This would be required if you want to throttle the events.

Also wondering whats better for performance - event pooling or throttling?

The value of peerDependencies is too restrictive as it pins React to ^0.14.3

$ npm install react-hammerjs --save
npm ERR! Darwin 15.3.0
npm ERR! argv "/Users/bramus/.nvm/versions/node/v4.3.1/bin/node" "/Users/bramus/.nvm/versions/node/v4.3.1/bin/npm" "install" "react-hammerjs" "--save"
npm ERR! node v4.3.1
npm ERR! npm  v2.14.12
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.1
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.3

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/bramus/repos/protoplayer/npm-debug.log

how do you set recognizers for onSwipe?

this isn't working for detecting swiperight

let options = { recognizers: { swipe: { event: 'swiperight' } } };

I am getting a warning message when using the hammer component:

Warning: Unknown propoptionson <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

I may be going down the wrong path but so far as I can tell, the gesture experience I'm going for in more like this codepen, then like this one.

The first one is very responsive to swipes and pans. you can flick the slides back and forth very quickly. This is also very much like what the swiper lib can do. (seen on homepage)

When I dive into the the code of that ideal example, I can see that they are using gesture.stopDetect() in swipes to prevent pans.

I can't seem to find the gesture object anywhere in any of the events that react-hammerjs gives back.

In short, I really just want to reproduce that first example with my carousel in react and it seems like I may have to use native hammerjs to do so?

Hammer.js has both pan and panmove events.
pan handles panstart, panmove, and panend.
panmove handles only itself.

Can we have both onPan and onPanMove events?

I am not sure about what I am doing wrong but some how the react-hammerjs module is unable to locate hammerjs

Just to be that hammerjs is installed I required it explicitly in my project and it was loading up

For example, if I'd like to set the default:

const hammerOptions = {
  cssProps: {
    userSelect: 'auto',
  },
};

This does not work. Seems like it may be because the code is using Hammer.set and these needs to be passed in the defaults.

[email protected] is out. Can this dependency be updated?

Was using...

     "react-dom": "^15.4.1",
     "react-hammerjs": "^0.5.0",

...and there was no issue.
Now I'm using..

    "react-dom": "^16.1.0",
    "react-hammerjs": "^1.0.1",

...and suddenly all children nodes to Hammer are being ignored.

EG. in the following code thing1 consoles but thing2 does NOT.

    return (
      <div ref={thing1 => { console.log('thing1', thing1) }}>
        <Hammer
          onPan={e => this.pan(e, theta, panelCount)}
          options={hammerOptions}
        >
          <div ref={thing2 => { console.log('thing2', thing2) }}>
            <div>{panels}</div>
          </div>
        </Hammer>
      </div>
    );

...removing Hammer completely allows thing2 to console.

Currently documentation seems to imply that constants are on the library:

import Hammer from 'react-hammerjs';

console.log(Hammer.DIRECTION_LEFT) //actually undefined
console.log(window.Hammer.DIRECTION_LEFT) //works

In any case, I would vote that the underlying Hammer object shouldn't be exposed globally and should be contained to the package.

Hi,

i was wondering if there is any difference between onTap and the builtin React onTouchStart ?

https://github.com/JedWatson/react-hammerjs/blob/master/src/Hammer.js#L56
'direction' should be defined.

Hi there,

I am using React 0.13 beta on a small project and when I tried to pull react-hammer in, I had conflicting problems since I am using CommonJS with browserify and this allowed react-hammer to still use React 0.12 although my project is in 0.13. The end result is a mess of warnings and weird exceptions.

As far as I know, the best way to solve this is to move react on package.json from dependencies to peerDependencies and also making sure the supported versions are correct. So far, react-hammer is 100% compatible with react 0.13 as far as I tested.

If anyone else is having this problem, one workaround is to require the dist version directly. Here is how I am requiring react-hammer right now:

var Hammer = require('react-hammerjs/dist/react-hammerjs');

The drawback for this workaround is this will only work when React is global, which works for me since I already have --insert-global-vars React on my browserify configuration.

The Hammer component references React.PropTypes.string. However, accessing PropTypes from the react package is now deprecated and will break in React v16. Instead, PropTypes should be imported from the prop-types package.

In the README, it says the following:

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

Reading this, the impression I get is that I can import the hammerjs library and supply any Hammer.DIRECTION_* value as the direction property on the react-hammerjs component. However, the direction property is actually expecting the property key for the constant, not the value of the constant itself.

For example:

import ReactHammer from 'react-hammerjs';
import Hammer from 'hammerjs';

// What I expected
<ReactHammer direction={Hammer.DIRECTION_ALL}><div></div></ReactHammer>

// What the library actually wanted
<ReactHammer direction="DIRECTION_ALL"><div></div></ReactHammer>

I would suggest that the documentation be updated to properly describe the direction property for pan and swipe events.

We have the following error after installing react-hammerjs (via npm):

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Cannot find module 'react-dom' from '/root/project/as-intuit-table/node_modules/react-hammerjs/src'
    at /root/project/as-intuit-table/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
    at process (/root/project/as-intuit-table/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
    at ondir (/root/project/as-intuit-table/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
    at load (/root/project/as-intuit-table/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/root/project/as-intuit-table/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /root/project/as-intuit-table/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at Object.oncomplete (fs.js:107:15)

Installing react-dom (0.14.0) fixes it.. but should it be in your deps?

I'm using:

"react": "15.0.1",
"react-dom": "15.0.1",
"react-hammerjs": "1.0.1",

Everything works like a charm, but I get the following error in console:

Warning: Hammer: `ref` is not a prop. Trying to access it will result in `undefined` 
being returned. If you need to access the same value within the child component, 
you should pass it as a different prop.

I think that React deprecated string refs and now only supports callback refs.
https://facebook.github.io/react/docs/refs-and-the-dom.html#legacy-api-string-refs

Probably each instance of a string ref has to be updated to use a callback ref instead.

when i use react-hammerjs to build a single page web application, I found that when I wrote Hammer with props 'onTap' and and another Hammer behind. The second Hammer tirggered when I clicked the first Hammer , How can I prevent it, Thanks for every advice.

The documentation does not make it clear, how to configure hammerjs, like

/* common hammerjs customization */
delete Hammer.defaults.cssProps.userSelect; // restore text highlight on desktop
Hammer.defaults.inputClass = Hammer.TouchInput; // only recognize gestures on touch inputs

How is it possible to to use react-hammerjs using this hammerjs config? Using options={{inputClass: 'Hammer.TouchInput'}}, as the documentation might suggest didn't work.

I find the vertical prop somewhat confusing as it does not actually limit Hammer to vertical gestures, but to gestures in all directions.

From the code:

// Hammer.js, L53
    if (props.vertical) {
        hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});
        hammer.get('swipe').set({direction: Hammer.DIRECTION_ALL});
    } else {
        hammer.get('pan').set({direction: Hammer.DIRECTION_HORIZONTAL});
        hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
    }

Given the Hammer.DIRECTION_* constants it'd be better to allow one to use those by means of a direction prop.

Example usage would be this:

var Hammer = require('hammerjs');
var ReactHammer = require('react-hammerjs');

<ReactHammer onSwipe={handleSwipe} direction="{Hammer.DIRECTION_VERTICAL}"><div>Swipe Me</div></ReactHammer>

(note that I also import Hammer itself, to gain access to the contstants. These could - for example - also be exposed on react-hammerjs)

I'm porting a React project to React Native v0.44 It says it cannot install the hammerjs dependency because the cap major version it allows is 15.x, however React Native 0.44 uses React 16.0.0-alpha.6. Do we know when 16 will be supported by hammerjs?

I'm trying to use react-hammerjs (0.5.0) with my react (15.4.2) app and I am getting the following error:

 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `HammerMe`.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:77)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)

Here is what my react component looks like:

import React from 'react';
import { Hammer } from 'react-hammerjs';

class HammerMe extends React.Component {
	
	handleTap(e) {
		console.log('Tap', e);
	}
    
    render() {
        return (
            <Hammer onTap={this.handleTap}> <div>Tap Me</div></Hammer>
        );
    }
}

export default HammerMe;

It seems that react hammerjs not support this event. Do you have any plans to support it?

I want to stop the current session.

stop([force])
Stop recognizing for the current input session. When forced, the recognizer cycle is stopped immediately.

mc.get('doubletap').recognizeWith('singletap');
mc.get('singletap').requireFailure('doubletap');

Hey I just want to do the above in react with this package, but I couldn't found a way. Any idea how I can manage this?

The actual problem is when you bind both onTap and onDoubleTap onTap fires first before onDoubleTap any other solution also works for me.

I have a child element using onTap and a parent element using onTap as well. But seems the stopPropagation for both is not seems stopping the event from firing, both function has the stopPropagation are firing regardless... any fix or clue?

Hello, when loading the page I get a type error:

This references:

I have tried verifying this.actions is a string, but no luck. Is there any reason why I am getting this error? I would assume that it's something I just am overlooking. Thanks!