nit: update to v6

Author: dbismut

demos/hooks/boundaries/index.js

@@ -8,26 +8,20 @@ const boundaries = [-100, 100, 100, -100]
 
 export default function Boundaries() {
   const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
-  const bind = useDrag(({ delta, memo = [x.getValue(), y.getValue()] }) => {
-    const [top, right, bottom, left] = boundaries
-    set({
-      x: clamp(memo[0] + delta[0], left, right),
-      y: clamp(memo[1] + delta[1], top, bottom),
-    })
-    return memo
-  })
+  const bind = useDrag(
+    ({ movement: [mx, my], memo = [x.getValue(), y.getValue()] }) => {
+      const [top, right, bottom, left] = boundaries
+      set({
+        x: clamp(memo[0] + mx, left, right),
+        y: clamp(memo[1] + my, top, bottom),
+      })
+      return memo
+    }
+  )
   return (
     <div className="flex-content boundaries">
       <div>
-        <animated.div
-          {...bind()}
-          style={{
-            transform: interpolate(
-              [x, y],
-              (x, y) => `translate3d(${x}px,${y}px,0)`
-            ),
-          }}
-        />
+        <animated.div {...bind()} style={{ x, y }} />
       </div>
     </div>
   )

demos/hooks/cards/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { useSprings, animated, interpolate } from 'react-spring'
-import { useGesture } from 'react-use-gesture'
+import { useSprings, animated, to as interpolate } from 'react-spring'
+import { useDrag } from 'react-use-gesture'
 import './styles.css'
 
 const cards = [
@@ -33,11 +33,11 @@ export default function Deck() {
     from: from(i),
   })) // Create a bunch of springs using the helpers above
   // Create a gesture, we're interested in down-state, delta (current-pos - click-pos), direction and velocity
-  const bind = useGesture(
+  const bind = useDrag(
     ({
       args: [index],
       down,
-      delta: [xDelta],
+      movement: [mx],
       distance,
       direction: [xDir],
       velocity,
@@ -48,8 +48,8 @@ export default function Deck() {
       set(i => {
         if (index !== i) return // We're only interested in changing spring-data for the current spring
         const isGone = gone.has(index)
-        const x = isGone ? (200 + window.innerWidth) * dir : down ? xDelta : 0 // When a card is gone it flys out left or right, otherwise goes back to zero
-        const rot = xDelta / 100 + (isGone ? dir * 10 * velocity : 0) // How much the card tilts, flicking it harder makes it rotate faster
+        const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0 // When a card is gone it flys out left or right, otherwise goes back to zero
+        const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0) // How much the card tilts, flicking it harder makes it rotate faster
         const scale = down ? 1.1 : 1 // Active cards lift up a bit
         return {
           x,