react-with-gesture - npm Package Compare versions

Comparing version 2.0.4 to 3.0.0

dist/react-with-gesture.es.js

@@ -51,2 +51,4 @@ import React from 'react';
 var initialState = {
+  target: undefined,
+  args: undefined,
   x: 0,
@@ -65,3 +67,3 @@ y: 0,
 
-function handlers(set, props) {
+function handlers(set, props, args) {
   if (props === void 0) {
@@ -75,2 +77,3 @@ props = {};
       var newProps = _extends({}, state, {
+        target: undefined,
         down: false
@@ -85,6 +88,9 @@ });
   var handleDown = function handleDown(_ref) {
-    var pageX = _ref.pageX,
+    var target = _ref.target,
+        pageX = _ref.pageX,
         pageY = _ref.pageY;
     return set(function (state) {
       var newProps = _extends({}, state, {
+        target: target,
+        args: args,
         x: pageX,
@@ -241,13 +247,23 @@ y: pageY,
   var transientState = React.useRef(initialState);
+  if (typeof props === 'function') props = {
+    transient: true,
+    onAction: props
+  };
 
   var _React$useState2 = React.useState(function () {
-    return handlers(props && props.transient ? function (cb) {
-      return transientState.current = cb(transientState.current);
-    } : set, props);
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return handlers(props && props.transient ? function (cb) {
+        return transientState.current = cb(transientState.current);
+      } : set, props, args);
+    };
   }),
       spread = _React$useState2[0];
 
-  return [spread, state];
+  return props && props.transient ? spread : [spread, state];
 }
 
 export { withGesture, Gesture, useGesture };

dist/react-with-gesture.js

@@ -57,2 +57,4 @@ 'use strict';
 var initialState = {
+  target: undefined,
+  args: undefined,
   x: 0,
@@ -71,3 +73,3 @@ y: 0,
 
-function handlers(set, props) {
+function handlers(set, props, args) {
   if (props === void 0) {
@@ -81,2 +83,3 @@ props = {};
       var newProps = _extends({}, state, {
+        target: undefined,
         down: false
@@ -91,6 +94,9 @@ });
   var handleDown = function handleDown(_ref) {
-    var pageX = _ref.pageX,
+    var target = _ref.target,
+        pageX = _ref.pageX,
         pageY = _ref.pageY;
     return set(function (state) {
       var newProps = _extends({}, state, {
+        target: target,
+        args: args,
         x: pageX,
@@ -247,11 +253,21 @@ y: pageY,
   var transientState = React.useRef(initialState);
+  if (typeof props === 'function') props = {
+    transient: true,
+    onAction: props
+  };
 
   var _React$useState2 = React.useState(function () {
-    return handlers(props && props.transient ? function (cb) {
-      return transientState.current = cb(transientState.current);
-    } : set, props);
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return handlers(props && props.transient ? function (cb) {
+        return transientState.current = cb(transientState.current);
+      } : set, props, args);
+    };
   }),
       spread = _React$useState2[0];
 
-  return [spread, state];
+  return props && props.transient ? spread : [spread, state];
 }
@@ -258,0 +274,0 @@

package.json

 {
     "name": "react-with-gesture",
-    "version": "2.0.4",
+    "version": "3.0.0",
     "description": "hoc for receiving gestures",
@@ -5,0 +5,0 @@ "main": "dist/react-with-gesture",

README.md

@@ -17,2 +17,3 @@ npm install react-with-gesture
 - `xPrev/yPrev`, coordinates of the previous frame
+- `target`, the dom element
 
@@ -80,5 +81,5 @@ ### Decorated higher order component
 function App() {
-  const [handlers, { down, x, y, xDelta, yDelta, xInitial, yInitial }] = useGesture()
+  const [bind, { args, down, x, y, xDelta, yDelta, xInitial, yInitial }] = useGesture()
   return (
-    <div {...handlers}>
+    <div {...bind(/*arguments you pass here will be available under args*/)}>
       Drag me! coordinates: {x}, {y}
@@ -92,14 +93,6 @@ </div>
 
-Provide the `transient` flag and it won't cause new render passes, instead you will be notified through the `onAction` callback. This works the same for Hoc's, render-props and hooks.
+This won't cause new render passes, instead you will be notified through the callback. This works the same for Hoc's, render-props and hooks.
 
 ```jsx
-const [handlers] = useGesture({ transient: true, onAction: e => console.log(e) })
-
-function BrokenCount() {
-  const [count, set] = useState(0)
-  // Will always remain 1, because "count" is stale ...
-  effect(() => void setInterval(() => set(count + 1), 1000), [])
-  return <div>{count}</div>
-}
-
+const bind = useGesture(e => console.log(e))
 ```

src/index.js

@@ -5,2 +5,4 @@ import React from 'react'
 const initialState = {
+  target: undefined,
+  args: undefined,
   x: 0,
@@ -19,14 +21,16 @@ y: 0,
 
-function handlers(set, props = {}) {
+function handlers(set, props = {}, args) {
   // Common handlers
   const handleUp = () =>
     set(state => {
-      const newProps = { ...state, down: false }
+      const newProps = { ...state, target: undefined, down: false }
       props.onAction && props.onAction(newProps)
       return newProps
     })
-  const handleDown = ({ pageX, pageY }) =>
+  const handleDown = ({ target, pageX, pageY }) =>
     set(state => {
       const newProps = {
         ...state,
+        target,
+        args,
         x: pageX,
@@ -119,3 +123,6 @@ y: pageY,
       return (
-        <div {...this.handlers} style={{ display: 'contents', ...style }} className={className}>
+        <div
+          {...this.handlers}
+          style={{ display: 'contents', ...style }}
+          className={className}>
           <Wrapped {...props} {...this.state} />
@@ -132,3 +139,3 @@ </div>
     }
-  },
+  }
 )
@@ -139,8 +146,15 @@
   const transientState = React.useRef(initialState)
+  if (typeof props === 'function') props = { transient: true, onAction: props }
   const [spread] = React.useState(() =>
-    handlers(props && props.transient ? cb => (transientState.current = cb(transientState.current)) : set, props),
+    (...args) => handlers(
+      props && props.transient
+        ? cb => (transientState.current = cb(transientState.current))
+        : set,
+      props,
+      args
+    )
   )
-  return [spread, state]
+  return props && props.transient ? spread : [spread, 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

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

Improved metrics

Total package byte prevSize

90746

increased by1.14%

Lines of code

691

increased by6.8%

Worsened metrics

Number of lines in readme file

96

decreased by-6.8%

No dependency changes