react-with-gesture - npm Package Compare versions

Comparing version 1.0.10 to 2.0.0-beta.0

dist/react-with-gesture.es.js

@@ -27,3 +27,3 @@ import React from 'react';
 
-function _objectWithoutProperties(source, excluded) {
+function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -40,88 +40,68 @@ var target = {};
 
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
   return target;
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+var withGesture = function withGesture(Wrapped) {
+  var _class, _temp;
 
-  return self;
-}
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_React$Component) {
+    _inheritsLoose(_class, _React$Component);
 
-var withGesture = function withGesture(Wrapped) {
-  return (
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inheritsLoose(_class2, _React$Component);
+    function _class() {
+      var _this;
 
-      function _class2() {
-        var _temp, _this;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+      _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+      _this.state = {
+        x: 0,
+        y: 0,
+        xDelta: 0,
+        yDelta: 0,
+        xInitial: 0,
+        yInitial: 0,
+        xPrev: 0,
+        yPrev: 0,
+        down: false // Touch handlers
 
-        return (_temp = _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this, _this.state = {
-          x: 0,
-          y: 0,
-          xDelta: 0,
-          yDelta: 0,
-          xInitial: 0,
-          yInitial: 0,
-          xPrev: 0,
-          yPrev: 0,
-          down: false
-        }, _this.handleTouchStart = function (e) {
-          return _this.handleMouseDown(e.touches[0]);
-        }, _this.handleTouchMove = function (e) {
-          return _this.handleMouseMove(e.touches[0]);
-        }, _this.handleMouseUp = function () {
-          window.removeEventListener('touchmove', _this.handleTouchMove);
-          window.removeEventListener('touchend', _this.handleMouseUp);
-          window.removeEventListener('mousemove', _this.handleMouseMoveRaf);
-          window.removeEventListener('mouseup', _this.handleMouseUp);
+      };
 
-          var newProps = _extends({}, _this.state, {
-            down: false
-          });
+      _this.handleTouchStart = function (e) {
+        if (!_this.props.touch) return;
+        window.addEventListener('touchmove', _this.handleTouchMove);
+        window.addEventListener('touchend', _this.handleTouchEnd);
 
-          _this.setState(_this.props.onUp ? _this.props.onUp(newProps) : newProps);
-        }, _this.handleMouseDown = function (_ref) {
-          var pageX = _ref.pageX,
-              pageY = _ref.pageY;
-          window.addEventListener('touchmove', _this.handleTouchMove);
-          window.addEventListener('touchend', _this.handleMouseUp);
-          window.addEventListener('mousemove', _this.handleMouseMoveRaf);
-          window.addEventListener('mouseup', _this.handleMouseUp);
+        _this.handleDown(e.touches[0]);
+      };
 
-          var newProps = _extends({}, _this.state, {
-            x: pageX,
-            y: pageY,
-            xDelta: 0,
-            yDelta: 0,
-            xInitial: pageX,
-            yInitial: pageY,
-            xPrev: pageX,
-            yPrev: pageY,
-            down: true
-          });
+      _this.handleTouchMove = function (e) {
+        _this.handleMove(e.touches[0]);
+      };
 
-          _this.setState(_this.props.onDown ? _this.props.onDown(newProps) : newProps);
-        }, _this.handleMouseMoveRaf = function (_ref2) {
-          var pageX = _ref2.pageX,
-              pageY = _ref2.pageY;
-          !_this._busy && requestAnimationFrame(function () {
-            return _this.handleMouseMove({
+      _this.handleTouchEnd = function () {
+        window.removeEventListener('touchmove', _this.handleTouchMove);
+        window.removeEventListener('touchend', _this.handleMouseUp);
+
+        _this.handleUp();
+      };
+
+      _this.handleMouseDown = function (e) {
+        if (!_this.props.mouse) return;
+        window.addEventListener('mousemove', _this.handleMouseMoveRaf);
+        window.addEventListener('mouseup', _this.handleMouseUp);
+
+        _this.handleDown(e);
+      };
+
+      _this.handleMouseMove = function (_ref) {
+        var pageX = _ref.pageX,
+            pageY = _ref.pageY;
+
+        if (!_this._busy) {
+          requestAnimationFrame(function () {
+            _this.handleMove({
               pageX: pageX,
@@ -132,58 +112,97 @@ pageY: pageY
           _this._busy = true;
-        }, _this.handleMouseMove = function (_ref3) {
-          var pageX = _ref3.pageX,
-              pageY = _ref3.pageY;
+        }
+      };
 
-          var newProps = _extends({}, _this.state, {
-            x: pageX,
-            y: pageY,
-            xDelta: pageX - _this.state.xInitial,
-            yDelta: pageY - _this.state.yInitial,
-            xPrev: _this.state.x,
-            yPrev: _this.state.y,
-            xVelocity: pageX - _this.state.x,
-            yVelocity: pageY - _this.state.y
-          });
+      _this.handleMouseUp = function () {
+        window.removeEventListener('mousemove', _this.handleMouseMove);
+        window.removeEventListener('mouseup', _this.handleMouseUp);
 
-          _this.setState(_this.props.onMove ? _this.props.onMove(newProps) : newProps, function () {
-            return _this._busy = false;
-          });
-        }, _temp) || _assertThisInitialized(_this);
-      }
+        _this.handleUp();
+      };
 
-      var _proto = _class2.prototype;
+      _this.handleDown = function (_ref2) {
+        var pageX = _ref2.pageX,
+            pageY = _ref2.pageY;
 
-      _proto.render = function render() {
-        var _props = this.props,
-            style = _props.style,
-            className = _props.className,
-            props = _objectWithoutProperties(_props, ["style", "className"]);
+        var newProps = _extends({}, _this.state, {
+          x: pageX,
+          y: pageY,
+          xDelta: 0,
+          yDelta: 0,
+          xInitial: pageX,
+          yInitial: pageY,
+          xPrev: pageX,
+          yPrev: pageY,
+          down: true
+        });
 
-        return React.createElement("div", {
-          onMouseDown: this.handleMouseDown,
-          onTouchStart: this.handleTouchStart,
-          style: _extends({
-            display: 'contents'
-          }, style),
-          className: className
-        }, React.createElement(Wrapped, _extends({}, props, this.state)));
+        _this.setState(_this.props.onDown ? _this.props.onDown(newProps) : newProps);
       };
 
-      return _class2;
-    }(React.Component)
-  );
+      _this.handleMove = function (_ref3) {
+        var pageX = _ref3.pageX,
+            pageY = _ref3.pageY;
+
+        var newProps = _extends({}, _this.state, {
+          x: pageX,
+          y: pageY,
+          xDelta: pageX - _this.state.xInitial,
+          yDelta: pageY - _this.state.yInitial,
+          xPrev: _this.state.x,
+          yPrev: _this.state.y,
+          xVelocity: pageX - _this.state.x,
+          yVelocity: pageY - _this.state.y
+        });
+
+        _this.setState(_this.props.onMove ? _this.props.onMove(newProps) : newProps, function () {
+          return _this._busy = false;
+        });
+      };
+
+      _this.handleUp = function () {
+        var newProps = _extends({}, _this.state, {
+          down: false
+        });
+
+        _this.setState(_this.props.onUp ? _this.props.onUp(newProps) : newProps);
+      };
+
+      return _this;
+    }
+
+    var _proto = _class.prototype;
+
+    _proto.render = function render() {
+      var _this$props = this.props,
+          style = _this$props.style,
+          className = _this$props.className,
+          props = _objectWithoutPropertiesLoose(_this$props, ["style", "className"]);
+
+      return React.createElement("div", {
+        onMouseDown: this.handleMouseDown,
+        onTouchStart: this.handleTouchStart,
+        style: _extends({
+          display: 'contents'
+        }, style),
+        className: className
+      }, React.createElement(Wrapped, _extends({}, props, this.state)));
+    };
+
+    return _class;
+  }(React.Component), _class.defaultProps = {
+    touch: true,
+    mouse: true
+  }, _temp;
 };
 
-var Gesture =
+var Gesture = withGesture(
 /*#__PURE__*/
-withGesture(
-/*#__PURE__*/
 function (_React$PureComponent) {
-  _inheritsLoose(_class3, _React$PureComponent);
+  _inheritsLoose(_class2, _React$PureComponent);
 
-  function _class3() {
+  function _class2() {
     return _React$PureComponent.apply(this, arguments) || this;
   }
 
-  var _proto2 = _class3.prototype;
+  var _proto2 = _class2.prototype;
 
@@ -194,5 +213,114 @@ _proto2.render = function render() {
 
-  return _class3;
+  return _class2;
 }(React.PureComponent));
 
-export { withGesture, Gesture };
+function useGesture(ref) {
+  var _React$useState = React.useState({
+    x: 0,
+    y: 0,
+    xDelta: 0,
+    yDelta: 0,
+    xInitial: 0,
+    yInitial: 0,
+    xPrev: 0,
+    yPrev: 0,
+    down: false
+  }),
+      state = _React$useState[0],
+      set = _React$useState[1];
+
+  var _React$useState2 = React.useState(function () {
+    // Common handlers
+    var handleDown = function handleDown(_ref4) {
+      var pageX = _ref4.pageX,
+          pageY = _ref4.pageY;
+      set(function (state) {
+        return _extends({}, state, {
+          x: pageX,
+          y: pageY,
+          xDelta: 0,
+          yDelta: 0,
+          xInitial: pageX,
+          yInitial: pageY,
+          xPrev: pageX,
+          yPrev: pageY,
+          down: true
+        });
+      });
+    };
+
+    var handleMove = function handleMove(_ref5) {
+      var pageX = _ref5.pageX,
+          pageY = _ref5.pageY;
+      set(function (state) {
+        return _extends({}, state, {
+          x: pageX,
+          y: pageY,
+          xDelta: pageX - state.xInitial,
+          yDelta: pageY - state.yInitial,
+          xPrev: state.x,
+          yPrev: state.y,
+          xVelocity: pageX - state.x,
+          yVelocity: pageY - state.y
+        });
+      });
+    };
+
+    var handleUp = function handleUp() {
+      return set(function (state) {
+        return _extends({}, state, {
+          down: false
+        });
+      });
+    }; // Touch handlers
+
+
+    var handleTouchStart = function handleTouchStart(e) {
+      window.addEventListener('touchmove', handleTouchMove);
+      window.addEventListener('touchend', handleTouchEnd);
+      handleDown(e.touches[0]);
+    };
+
+    var handleTouchMove = function handleTouchMove(e) {
+      return handleMove(e.touches[0]);
+    };
+
+    var handleTouchEnd = function handleTouchEnd() {
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('touchend', handleMouseUp);
+      handleUp();
+    }; // Mouse handlers
+
+
+    var handleMouseDown = function handleMouseDown(e) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      handleDown(e);
+    };
+
+    var handleMouseMove = function handleMouseMove(_ref6) {
+      var pageX = _ref6.pageX,
+          pageY = _ref6.pageY;
+      return handleMove({
+        pageX: pageX,
+        pageY: pageY
+      });
+    };
+
+    var handleMouseUp = function handleMouseUp() {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      handleUp();
+    };
+
+    return {
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart
+    };
+  }),
+      handlers = _React$useState2[0];
+
+  return [handlers, state];
+}
+
+export { withGesture, Gesture, useGesture };

dist/react-with-gesture.js

@@ -33,3 +33,3 @@ 'use strict';
 
-function _objectWithoutProperties(source, excluded) {
+function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -46,88 +46,68 @@ var target = {};
 
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
   return target;
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+var withGesture = function withGesture(Wrapped) {
+  var _class, _temp;
 
-  return self;
-}
+  return _temp = _class =
+  /*#__PURE__*/
+  function (_React$Component) {
+    _inheritsLoose(_class, _React$Component);
 
-var withGesture = function withGesture(Wrapped) {
-  return (
-    /*#__PURE__*/
-    function (_React$Component) {
-      _inheritsLoose(_class2, _React$Component);
+    function _class() {
+      var _this;
 
-      function _class2() {
-        var _temp, _this;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+      _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+      _this.state = {
+        x: 0,
+        y: 0,
+        xDelta: 0,
+        yDelta: 0,
+        xInitial: 0,
+        yInitial: 0,
+        xPrev: 0,
+        yPrev: 0,
+        down: false // Touch handlers
 
-        return (_temp = _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this, _this.state = {
-          x: 0,
-          y: 0,
-          xDelta: 0,
-          yDelta: 0,
-          xInitial: 0,
-          yInitial: 0,
-          xPrev: 0,
-          yPrev: 0,
-          down: false
-        }, _this.handleTouchStart = function (e) {
-          return _this.handleMouseDown(e.touches[0]);
-        }, _this.handleTouchMove = function (e) {
-          return _this.handleMouseMove(e.touches[0]);
-        }, _this.handleMouseUp = function () {
-          window.removeEventListener('touchmove', _this.handleTouchMove);
-          window.removeEventListener('touchend', _this.handleMouseUp);
-          window.removeEventListener('mousemove', _this.handleMouseMoveRaf);
-          window.removeEventListener('mouseup', _this.handleMouseUp);
+      };
 
-          var newProps = _extends({}, _this.state, {
-            down: false
-          });
+      _this.handleTouchStart = function (e) {
+        if (!_this.props.touch) return;
+        window.addEventListener('touchmove', _this.handleTouchMove);
+        window.addEventListener('touchend', _this.handleTouchEnd);
 
-          _this.setState(_this.props.onUp ? _this.props.onUp(newProps) : newProps);
-        }, _this.handleMouseDown = function (_ref) {
-          var pageX = _ref.pageX,
-              pageY = _ref.pageY;
-          window.addEventListener('touchmove', _this.handleTouchMove);
-          window.addEventListener('touchend', _this.handleMouseUp);
-          window.addEventListener('mousemove', _this.handleMouseMoveRaf);
-          window.addEventListener('mouseup', _this.handleMouseUp);
+        _this.handleDown(e.touches[0]);
+      };
 
-          var newProps = _extends({}, _this.state, {
-            x: pageX,
-            y: pageY,
-            xDelta: 0,
-            yDelta: 0,
-            xInitial: pageX,
-            yInitial: pageY,
-            xPrev: pageX,
-            yPrev: pageY,
-            down: true
-          });
+      _this.handleTouchMove = function (e) {
+        _this.handleMove(e.touches[0]);
+      };
 
-          _this.setState(_this.props.onDown ? _this.props.onDown(newProps) : newProps);
-        }, _this.handleMouseMoveRaf = function (_ref2) {
-          var pageX = _ref2.pageX,
-              pageY = _ref2.pageY;
-          !_this._busy && requestAnimationFrame(function () {
-            return _this.handleMouseMove({
+      _this.handleTouchEnd = function () {
+        window.removeEventListener('touchmove', _this.handleTouchMove);
+        window.removeEventListener('touchend', _this.handleMouseUp);
+
+        _this.handleUp();
+      };
+
+      _this.handleMouseDown = function (e) {
+        if (!_this.props.mouse) return;
+        window.addEventListener('mousemove', _this.handleMouseMoveRaf);
+        window.addEventListener('mouseup', _this.handleMouseUp);
+
+        _this.handleDown(e);
+      };
+
+      _this.handleMouseMove = function (_ref) {
+        var pageX = _ref.pageX,
+            pageY = _ref.pageY;
+
+        if (!_this._busy) {
+          requestAnimationFrame(function () {
+            _this.handleMove({
               pageX: pageX,
@@ -138,58 +118,97 @@ pageY: pageY
           _this._busy = true;
-        }, _this.handleMouseMove = function (_ref3) {
-          var pageX = _ref3.pageX,
-              pageY = _ref3.pageY;
+        }
+      };
 
-          var newProps = _extends({}, _this.state, {
-            x: pageX,
-            y: pageY,
-            xDelta: pageX - _this.state.xInitial,
-            yDelta: pageY - _this.state.yInitial,
-            xPrev: _this.state.x,
-            yPrev: _this.state.y,
-            xVelocity: pageX - _this.state.x,
-            yVelocity: pageY - _this.state.y
-          });
+      _this.handleMouseUp = function () {
+        window.removeEventListener('mousemove', _this.handleMouseMove);
+        window.removeEventListener('mouseup', _this.handleMouseUp);
 
-          _this.setState(_this.props.onMove ? _this.props.onMove(newProps) : newProps, function () {
-            return _this._busy = false;
-          });
-        }, _temp) || _assertThisInitialized(_this);
-      }
+        _this.handleUp();
+      };
 
-      var _proto = _class2.prototype;
+      _this.handleDown = function (_ref2) {
+        var pageX = _ref2.pageX,
+            pageY = _ref2.pageY;
 
-      _proto.render = function render() {
-        var _props = this.props,
-            style = _props.style,
-            className = _props.className,
-            props = _objectWithoutProperties(_props, ["style", "className"]);
+        var newProps = _extends({}, _this.state, {
+          x: pageX,
+          y: pageY,
+          xDelta: 0,
+          yDelta: 0,
+          xInitial: pageX,
+          yInitial: pageY,
+          xPrev: pageX,
+          yPrev: pageY,
+          down: true
+        });
 
-        return React.createElement("div", {
-          onMouseDown: this.handleMouseDown,
-          onTouchStart: this.handleTouchStart,
-          style: _extends({
-            display: 'contents'
-          }, style),
-          className: className
-        }, React.createElement(Wrapped, _extends({}, props, this.state)));
+        _this.setState(_this.props.onDown ? _this.props.onDown(newProps) : newProps);
       };
 
-      return _class2;
-    }(React.Component)
-  );
+      _this.handleMove = function (_ref3) {
+        var pageX = _ref3.pageX,
+            pageY = _ref3.pageY;
+
+        var newProps = _extends({}, _this.state, {
+          x: pageX,
+          y: pageY,
+          xDelta: pageX - _this.state.xInitial,
+          yDelta: pageY - _this.state.yInitial,
+          xPrev: _this.state.x,
+          yPrev: _this.state.y,
+          xVelocity: pageX - _this.state.x,
+          yVelocity: pageY - _this.state.y
+        });
+
+        _this.setState(_this.props.onMove ? _this.props.onMove(newProps) : newProps, function () {
+          return _this._busy = false;
+        });
+      };
+
+      _this.handleUp = function () {
+        var newProps = _extends({}, _this.state, {
+          down: false
+        });
+
+        _this.setState(_this.props.onUp ? _this.props.onUp(newProps) : newProps);
+      };
+
+      return _this;
+    }
+
+    var _proto = _class.prototype;
+
+    _proto.render = function render() {
+      var _this$props = this.props,
+          style = _this$props.style,
+          className = _this$props.className,
+          props = _objectWithoutPropertiesLoose(_this$props, ["style", "className"]);
+
+      return React.createElement("div", {
+        onMouseDown: this.handleMouseDown,
+        onTouchStart: this.handleTouchStart,
+        style: _extends({
+          display: 'contents'
+        }, style),
+        className: className
+      }, React.createElement(Wrapped, _extends({}, props, this.state)));
+    };
+
+    return _class;
+  }(React.Component), _class.defaultProps = {
+    touch: true,
+    mouse: true
+  }, _temp;
 };
 
-var Gesture =
+var Gesture = withGesture(
 /*#__PURE__*/
-withGesture(
-/*#__PURE__*/
 function (_React$PureComponent) {
-  _inheritsLoose(_class3, _React$PureComponent);
+  _inheritsLoose(_class2, _React$PureComponent);
 
-  function _class3() {
+  function _class2() {
     return _React$PureComponent.apply(this, arguments) || this;
   }
 
-  var _proto2 = _class3.prototype;
+  var _proto2 = _class2.prototype;
 
@@ -200,6 +219,116 @@ _proto2.render = function render() {
 
-  return _class3;
+  return _class2;
 }(React.PureComponent));
 
+function useGesture(ref) {
+  var _React$useState = React.useState({
+    x: 0,
+    y: 0,
+    xDelta: 0,
+    yDelta: 0,
+    xInitial: 0,
+    yInitial: 0,
+    xPrev: 0,
+    yPrev: 0,
+    down: false
+  }),
+      state = _React$useState[0],
+      set = _React$useState[1];
+
+  var _React$useState2 = React.useState(function () {
+    // Common handlers
+    var handleDown = function handleDown(_ref4) {
+      var pageX = _ref4.pageX,
+          pageY = _ref4.pageY;
+      set(function (state) {
+        return _extends({}, state, {
+          x: pageX,
+          y: pageY,
+          xDelta: 0,
+          yDelta: 0,
+          xInitial: pageX,
+          yInitial: pageY,
+          xPrev: pageX,
+          yPrev: pageY,
+          down: true
+        });
+      });
+    };
+
+    var handleMove = function handleMove(_ref5) {
+      var pageX = _ref5.pageX,
+          pageY = _ref5.pageY;
+      set(function (state) {
+        return _extends({}, state, {
+          x: pageX,
+          y: pageY,
+          xDelta: pageX - state.xInitial,
+          yDelta: pageY - state.yInitial,
+          xPrev: state.x,
+          yPrev: state.y,
+          xVelocity: pageX - state.x,
+          yVelocity: pageY - state.y
+        });
+      });
+    };
+
+    var handleUp = function handleUp() {
+      return set(function (state) {
+        return _extends({}, state, {
+          down: false
+        });
+      });
+    }; // Touch handlers
+
+
+    var handleTouchStart = function handleTouchStart(e) {
+      window.addEventListener('touchmove', handleTouchMove);
+      window.addEventListener('touchend', handleTouchEnd);
+      handleDown(e.touches[0]);
+    };
+
+    var handleTouchMove = function handleTouchMove(e) {
+      return handleMove(e.touches[0]);
+    };
+
+    var handleTouchEnd = function handleTouchEnd() {
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('touchend', handleMouseUp);
+      handleUp();
+    }; // Mouse handlers
+
+
+    var handleMouseDown = function handleMouseDown(e) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      handleDown(e);
+    };
+
+    var handleMouseMove = function handleMouseMove(_ref6) {
+      var pageX = _ref6.pageX,
+          pageY = _ref6.pageY;
+      return handleMove({
+        pageX: pageX,
+        pageY: pageY
+      });
+    };
+
+    var handleMouseUp = function handleMouseUp() {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      handleUp();
+    };
+
+    return {
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart
+    };
+  }),
+      handlers = _React$useState2[0];
+
+  return [handlers, state];
+}
+
 exports.withGesture = withGesture;
 exports.Gesture = Gesture;
+exports.useGesture = useGesture;

package.json

 {
     "name": "react-with-gesture",
-    "version": "1.0.10",
+    "version": "2.0.0-beta.0",
     "description": "hoc for receiving gestures",
     "main": "dist/react-with-gesture",
     "module": "dist/react-with-gesture.es",
+    "typings": "./index.d.ts",
     "sideEffects": false,
@@ -11,3 +12,4 @@ "scripts": {
         "build": "rollup -c",
-        "prepare": "npm run build"
+        "prepare": "npm run build",
+        "test:typings": "typings-tester --dir test/typescript"
     },
@@ -32,17 +34,21 @@ "repository": {
     "devDependencies": {
-        "@babel/core": "7.0.0-beta.40",
-        "@babel/plugin-transform-runtime": "7.0.0-beta.40",
-        "@babel/preset-env": "7.0.0-beta.40",
-        "@babel/preset-react": "7.0.0-beta.40",
-        "@babel/preset-stage-2": "7.0.0-beta.40",
-        "@babel/runtime": "7.0.0-beta.40",
+        "@babel/core": "7.1.2",
+        "@babel/plugin-proposal-class-properties": "^7.1.0",
+        "@babel/plugin-transform-runtime": "7.1.0",
+        "@babel/preset-env": "7.1.0",
+        "@babel/preset-react": "7.0.0",
+        "@babel/preset-stage-2": "7.0.0",
+        "@babel/runtime": "7.1.2",
+        "@types/react": "^16.4.18",
         "babel-core": "7.0.0-bridge.0",
-        "babel-jest": "22.4.0",
-        "babel-plugin-annotate-pure-calls": "0.3.0-beta.0",
-        "babel-plugin-transform-react-remove-prop-types": "0.4.13",
-        "react": "16.2.0",
-        "react-dom": "16.2.0",
+        "babel-jest": "23.6.0",
+        "babel-plugin-annotate-pure-calls": "0.4.0",
+        "babel-plugin-transform-react-remove-prop-types": "0.4.19",
+        "react": "16.6.0",
+        "react-dom": "16.6.0",
         "rimraf": "2.6.2",
-        "rollup": "0.56.2",
-        "rollup-plugin-babel": "4.0.0-beta.2"
+        "rollup": "0.67.0",
+        "rollup-plugin-babel": "4.0.3",
+        "typescript": "^3.1.6",
+        "typings-tester": "^0.3.2"
     },
@@ -49,0 +55,0 @@ "peerDependencies": {

README.md

@@ -55,1 +55,9 @@ npm install react-with-gesture
 ```
+
+or ...
+
+```jsx
+const [handlers, { down, x, y, xDelta, yDelta, xInitial, yInitial }] = useGesture()
+return (
+    <div {...handlers}>Drag me! coordinates: {x}, {y}</div>
+```

src/index.js

 import React from 'react'
 
 const withGesture = Wrapped =>
-    class extends React.Component {
-        state = { x: 0, y: 0, xDelta: 0, yDelta: 0, xInitial: 0, yInitial: 0, xPrev: 0, yPrev: 0, down: false }
+  class extends React.Component {
+    static defaultProps = {
+      touch: true,
+      mouse: true,
+    }
 
-        handleTouchStart = e => this.handleMouseDown(e.touches[0])
-        handleTouchMove = e => this.handleMouseMove(e.touches[0])
+    state = {
+      x: 0,
+      y: 0,
+      xDelta: 0,
+      yDelta: 0,
+      xInitial: 0,
+      yInitial: 0,
+      xPrev: 0,
+      yPrev: 0,
+      down: false,
+    }
 
-        handleMouseUp = () => {
-            window.removeEventListener('touchmove', this.handleTouchMove)
-            window.removeEventListener('touchend', this.handleMouseUp)
-            window.removeEventListener('mousemove', this.handleMouseMoveRaf)
-            window.removeEventListener('mouseup', this.handleMouseUp)
-            const newProps = { ...this.state, down: false }
-            this.setState(this.props.onUp ? this.props.onUp(newProps) : newProps)
-        }
+    // Touch handlers
+    handleTouchStart = e => {
+      if (!this.props.touch) return
+      window.addEventListener('touchmove', this.handleTouchMove)
+      window.addEventListener('touchend', this.handleTouchEnd)
+      this.handleDown(e.touches[0])
+    }
+    handleTouchMove = e => {
+      this.handleMove(e.touches[0])
+    }
+    handleTouchEnd = () => {
+      window.removeEventListener('touchmove', this.handleTouchMove)
+      window.removeEventListener('touchend', this.handleMouseUp)
+      this.handleUp()
+    }
 
-        handleMouseDown = ({ pageX, pageY }) => {
-            window.addEventListener('touchmove', this.handleTouchMove)
-            window.addEventListener('touchend', this.handleMouseUp)
-            window.addEventListener('mousemove', this.handleMouseMoveRaf)
-            window.addEventListener('mouseup', this.handleMouseUp)
-            const newProps = { ...this.state, x: pageX, y: pageY, xDelta: 0, yDelta: 0, xInitial: pageX, yInitial: pageY, xPrev: pageX, yPrev: pageY, down: true }
-            this.setState(this.props.onDown ? this.props.onDown(newProps) : newProps)
-        }
+    // Mouse handlers
+    handleMouseDown = e => {
+      if (!this.props.mouse) return
+      window.addEventListener('mousemove', this.handleMouseMoveRaf)
+      window.addEventListener('mouseup', this.handleMouseUp)
+      this.handleDown(e)
+    }
+    handleMouseMove = ({ pageX, pageY }) => {
+      if (!this._busy) {
+        requestAnimationFrame(() => {
+          this.handleMove({
+            pageX,
+            pageY,
+          })
+        })
+        this._busy = true
+      }
+    }
+    handleMouseUp = () => {
+      window.removeEventListener('mousemove', this.handleMouseMove)
+      window.removeEventListener('mouseup', this.handleMouseUp)
+      this.handleUp()
+    }
 
-        handleMouseMoveRaf = ({ pageX, pageY }) => {
-            !this._busy && requestAnimationFrame(() => this.handleMouseMove({ pageX, pageY }))
-            this._busy = true
-        }
-        handleMouseMove = ({ pageX, pageY }) => {
-            const newProps = { ...this.state, x: pageX, y: pageY, xDelta: pageX - this.state.xInitial, yDelta: pageY - this.state.yInitial, xPrev: this.state.x, yPrev: this.state.y, xVelocity: pageX - this.state.x, yVelocity: pageY - this.state.y }
-            this.setState(this.props.onMove ? this.props.onMove(newProps) : newProps, () => (this._busy = false))
-        }
+    // Common handlers
+    handleDown = ({ pageX, pageY }) => {
+      const newProps = {
+        ...this.state,
+        x: pageX,
+        y: pageY,
+        xDelta: 0,
+        yDelta: 0,
+        xInitial: pageX,
+        yInitial: pageY,
+        xPrev: pageX,
+        yPrev: pageY,
+        down: true,
+      }
+      this.setState(this.props.onDown ? this.props.onDown(newProps) : newProps)
+    }
+    handleMove = ({ pageX, pageY }) => {
+      const newProps = {
+        ...this.state,
+        x: pageX,
+        y: pageY,
+        xDelta: pageX - this.state.xInitial,
+        yDelta: pageY - this.state.yInitial,
+        xPrev: this.state.x,
+        yPrev: this.state.y,
+        xVelocity: pageX - this.state.x,
+        yVelocity: pageY - this.state.y,
+      }
+      this.setState(this.props.onMove ? this.props.onMove(newProps) : newProps, () => (this._busy = false))
+    }
+    handleUp = () => {
+      const newProps = {
+        ...this.state,
+        down: false,
+      }
+      this.setState(this.props.onUp ? this.props.onUp(newProps) : newProps)
+    }
 
-        render() {
-            const { style, className, ...props } = this.props
-            return (
-                <div
-                    onMouseDown={this.handleMouseDown}
-                    onTouchStart={this.handleTouchStart}
-                    style={{ display: 'contents', ...style }}
-                    className={className}>
-                    <Wrapped {...props} {...this.state} />
-                </div>
-            )
-        }
+    render() {
+      const { style, className, ...props } = this.props
+      return (
+        <div
+          onMouseDown={this.handleMouseDown}
+          onTouchStart={this.handleTouchStart}
+          style={{ display: 'contents', ...style }}
+          className={className}>
+          <Wrapped {...props} {...this.state} />
+        </div>
+      )
     }
+  }
 
 const Gesture = withGesture(
-    class extends React.PureComponent {
-        render() {
-            return this.props.children(this.props)
-        }
-    },
+  class extends React.PureComponent {
+    render() {
+      return this.props.children(this.props)
+    }
+  },
 )
 
-export { withGesture, Gesture }
+function useGesture(ref) {
+  const [state, set] = React.useState({
+    x: 0,
+    y: 0,
+    xDelta: 0,
+    yDelta: 0,
+    xInitial: 0,
+    yInitial: 0,
+    xPrev: 0,
+    yPrev: 0,
+    down: false
+  })
+
+  const [handlers] = React.useState(() => {
+    // Common handlers
+    const handleDown = ({ pageX, pageY }) => {
+      set(state => ({
+        ...state,
+        x: pageX,
+        y: pageY,
+        xDelta: 0,
+        yDelta: 0,
+        xInitial: pageX,
+        yInitial: pageY,
+        xPrev: pageX,
+        yPrev: pageY,
+        down: true
+      }))
+    }
+    const handleMove = ({ pageX, pageY }) => {
+      set(state => ({
+        ...state,
+        x: pageX,
+        y: pageY,
+        xDelta: pageX - state.xInitial,
+        yDelta: pageY - state.yInitial,
+        xPrev: state.x,
+        yPrev: state.y,
+        xVelocity: pageX - state.x,
+        yVelocity: pageY - state.y
+      }))
+    }
+    const handleUp = () => set(state => ({ ...state, down: false }))
+
+    // Touch handlers
+    const handleTouchStart = e => {
+      window.addEventListener('touchmove', handleTouchMove)
+      window.addEventListener('touchend', handleTouchEnd)
+      handleDown(e.touches[0])
+    }
+    const handleTouchMove = e => handleMove(e.touches[0])
+    const handleTouchEnd = () => {
+      window.removeEventListener('touchmove', handleTouchMove)
+      window.removeEventListener('touchend', handleMouseUp)
+      handleUp()
+    }
+
+    // Mouse handlers
+    const handleMouseDown = e => {
+      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener('mouseup', handleMouseUp)
+      handleDown(e)
+    }
+    const handleMouseMove = ({ pageX, pageY }) => handleMove({ pageX, pageY })
+    const handleMouseUp = () => {
+      window.removeEventListener('mousemove', handleMouseMove)
+      window.removeEventListener('mouseup', handleMouseUp)
+      handleUp()
+    }
+    return {
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart
+    }
+  })
+  return [handlers, state]
+}
+
+export { withGesture, Gesture, useGesture }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94921

increased by10.9%

Number of package files

14

increased by40%

Lines of code

831

increased by105.19%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

62

increased by12.73%

Worsened metrics

Dev dependency count

19

increased by26.67%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes