Use findDOMNode to get the component reference

dist/react-hammerjs.es.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -117,7 +118,7 @@ var HammerComponent = function (_React$Component) {
 	_createClass(HammerComponent, [{
 		key: 'componentDidMount',
 		value: function componentDidMount() {
-			this.hammer = new Hammer(this.domElement);
+			this.hammer = new Hammer(findDOMNode(this));
 			updateHammer(this.hammer, this.props);
 		}
 	}, {
@@ -147,14 +148,6 @@ var HammerComponent = function (_React$Component) {
 				}
 			}, this);
 
-			var self = this;
-			props.ref = function (domElement) {
-				if (self.props.ref) {
-					self.props.ref(domElement);
-				}
-				self.domElement = domElement;
-			};
-
 			// Reuse the child provided
 			// This makes it flexible to use whatever element is wanted (div, ul, etc)
 			return React.cloneElement(React.Children.only(this.props.children), props);

dist/react-hammerjs.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('prop-types'), require('react')) :
-	typeof define === 'function' && define.amd ? define(['prop-types', 'react'], factory) :
-	(global.Hammer = factory(global.PropTypes,global.React));
-}(this, (function (PropTypes,React) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('prop-types'), require('react'), require('react-dom')) :
+	typeof define === 'function' && define.amd ? define(['prop-types', 'react', 'react-dom'], factory) :
+	(global.Hammer = factory(global.PropTypes,global.React,global.ReactDOM));
+}(this, (function (PropTypes,React,reactDom) { 'use strict';
 
 PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
 React = React && React.hasOwnProperty('default') ? React['default'] : React;
@@ -123,7 +123,7 @@ var HammerComponent = function (_React$Component) {
 	_createClass(HammerComponent, [{
 		key: 'componentDidMount',
 		value: function componentDidMount() {
-			this.hammer = new Hammer(this.domElement);
+			this.hammer = new Hammer(reactDom.findDOMNode(this));
 			updateHammer(this.hammer, this.props);
 		}
 	}, {
@@ -153,14 +153,6 @@ var HammerComponent = function (_React$Component) {
 				}
 			}, this);
 
-			var self = this;
-			props.ref = function (domElement) {
-				if (self.props.ref) {
-					self.props.ref(domElement);
-				}
-				self.domElement = domElement;
-			};
-
 			// Reuse the child provided
 			// This makes it flexible to use whatever element is wanted (div, ul, etc)
 			return React.cloneElement(React.Children.only(this.props.children), props);

lib/Hammer.js

@@ -14,6 +14,8 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require('react-dom');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -130,7 +132,7 @@ var HammerComponent = function (_React$Component) {
 	_createClass(HammerComponent, [{
 		key: 'componentDidMount',
 		value: function componentDidMount() {
-			this.hammer = new Hammer(this.domElement);
+			this.hammer = new Hammer((0, _reactDom.findDOMNode)(this));
 			updateHammer(this.hammer, this.props);
 		}
 	}, {
@@ -160,14 +162,6 @@ var HammerComponent = function (_React$Component) {
 				}
 			}, this);
 
-			var self = this;
-			props.ref = function (domElement) {
-				if (self.props.ref) {
-					self.props.ref(domElement);
-				}
-				self.domElement = domElement;
-			};
-
 			// Reuse the child provided
 			// This makes it flexible to use whatever element is wanted (div, ul, etc)
 			return _react2.default.cloneElement(_react2.default.Children.only(this.props.children), props);

package.json

@@ -34,7 +34,8 @@
     "uglify-es": "^3.1.5"
   },
   "peerDependencies": {
-    "react": "^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0"
+    "react": ">= 0.14.9 < 17.0.0",
+    "react-dom": ">= 0.14.9 < 17.0.0"
   },
   "scripts": {
     "build": "npm run build:clean && npm run build:lib && npm run build:dist",

src/Hammer.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { findDOMNode } from 'react-dom'
 
 // require('hammerjs') when in a browser. This is safe because Hammer is only
 // invoked in componentDidMount, which is not executed on the server.
@@ -109,7 +110,7 @@ export default class HammerComponent extends React.Component {
 	};
 
 	componentDidMount() {
-		this.hammer = new Hammer(this.domElement);
+		this.hammer = new Hammer(findDOMNode(this));
 		updateHammer(this.hammer, this.props);
 	}
 
@@ -136,14 +137,6 @@ export default class HammerComponent extends React.Component {
 			}
 		}, this);
 
-		var self = this;
-		props.ref = function(domElement) {
-			if (self.props.ref) {
-				self.props.ref(domElement);
-			}
-			self.domElement = domElement;
-		};
-
 		// Reuse the child provided
 		// This makes it flexible to use whatever element is wanted (div, ul, etc)
 		return React.cloneElement(React.Children.only(this.props.children), props);