How to use react-use-gesture - 10 common examples

export default function Simple() {
  const [props, set] = useSpring(() => ({ x: 0, y: 0, scale: 1 }))
  const bind = useDrag(({ down, movement: [x, y] }) => {
    set({ x: down ? x : 0, y: down ? y : 0, scale: down ? 1.2 : 1 })
  })
  // Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-)
  return (
    <div>
      
    </div>
  )
}

function QuackQuinder({results}) {
    const {state, dispatch} = useContext(QuackContext);
    const {happy, sad} = state;
    const [gone] = useState(() => new Set()) // The set flags all the results that are flicked out
    const [props, set] = useSprings(results.length, i => ({...to(i), 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 = useDrag(({args: [index], down, movement: [mx], distance, direction: [xDir], velocity}) => {
        const trigger = velocity > 0.2 // If you flick hard enough it should trigger the card to fly out
        const dir = xDir < 0 ? -1 : xDir > 0 ? 1 : 0 // Direction should either point left or right

        if (down) dispatch({type: 'SET_VOTESTATE', data: dir})
        if (!down) dispatch({type: 'SET_VOTESTATE', data: 0})

        if (!down && trigger) {
            gone.add(index)
            if (dir == 1) {
                dispatch({type: 'ADD_HAPPY', data: results[index]})
            } else {
                dispatch({type: 'ADD_SAD', data: results[index]})
            }

        }
        set(i => {

const offset = activeIndex !== undefined ? activeIndex * -1 : 0;

  const maxIndex =
    parentMax === -1 ? React.Children.count(children) - 1 : parentMax;

  // dragX will represent the current drag value to animate
  const [{ translateX, dragX }, set] = useSpring(() => ({
    translateX: offset * 100 * pageSize,
    dragX: 0,
  }));

  // this might look a bit strange but it's part of the api for useDrag
  // bind() is a function we'll add to our container div that gives us a bunch of gesture state data
  // think of this as an event listener for gestures

  const bind = useDrag(({ delta, last, vxvy, currentTarget }) => {
    // this is the drag value
    const [x] = delta;

    // the velocity of the drag -- important to track to prevent jank after user releases
    const [vx] = vxvy;


    // we want the value to immediate update w/ a user drag event, not spring to the value
    set({ dragX: x, immediate: true });

    // last is true when the user releases from dragging
    if (last) {
      const absChange = Math.abs(x);

      const target: any = currentTarget as any;

*/
  const onClose = useCallback(
    (e?) => {
      e?.preventDefault();
      closing.current = true;
      // Animate offscreen
      setSpring({ to: { transform: `translateY(${height()}px)` } });
    },
    [setSpring]
  );

  // Handle global escape key
  useGlobalEscapeKey(onClose);

  // This handles all drag interaction. The callback is called without re-render.
  const bindDrag = useDrag(({ event, active, movement, vxvy, last, cancel }) => {
    event?.stopPropagation();

    // If we haven't enabled dragging, cancel the gesture
    if (!last && cancel && !dragging.current) {
      cancel();
    }

    // How far down should we be positioned?
    const yDelta = active ? Math.max(0, movement[1]) : 0;
    // Set immediate (no animation) if we're in a gesture, so it follows your finger precisely
    setSpring({ immediate: active, to: { transform: `translateY(${yDelta}px)` } });

    // Detect if the gesture ended with a high velocity, or with the sheet more than
    // dismissAmount percent of the way down - if so, consider it a close gesture.
    if (last && (movement[1] > (height() || 0) * dismissAmount || vxvy[1] > dismissVelocity)) {
      onClose();

},
    [position, rotation]
  );

  // Register box as a physics body with mass
  const ref = useCannon({ mass: 100 }, fn, []);

  useEffect(() => {
    if (dragging) {
      bodyRef.current.sleep();
    } else {
      bodyRef.current.wakeUp();
    }
  }, [dragging, onDrag, onDragStop]);

  const bindDrag = useDrag(
    // eslint-disable-next-line
    ({ delta: [x, y], vxvy: [vx, vy], dragging, event }) => {
      event.nativeEvent.preventDefault();
      event.nativeEvent.stopPropagation();

      bodyRef.current.position.set(
        bodyRef.current.position.x + x / aspect,
        bodyRef.current.position.y + -y / aspect,
        bodyRef.current.position.z
      );

      if (dragging) {
        onDrag();
        setDragging(true);
      } else {
        onDragStop();

export default (set) => {
  const [{ dragging, dragDistance, width, currentIndex }, dispatch] = useStateContext()

  const bind = useDrag(({
    down,
    movement: [xDelta],
    direction: [xDir],
    distance,
    cancel,
    canceled
  }) => {
    if (canceled) return
    if (down && distance > dragDistance) {
      dispatch({ type: xDir > 0 ? 'PREV' : 'NEXT', pause: true })
      cancel()
    }
    set(i => {
      if (i < currentIndex - 1 || i > currentIndex + 1) return { display: 'none' }
      // const sc = down ? 1 - distance / window.innerWidth / 2 : 1
      const x = (i - currentIndex) * width + (down ? xDelta : 0)

export function Bounds({ setActive }) {
  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
  const bind = useDrag(
    ({ down, offset: [ox, oy] }) => {
      setActive && setActive(down)
      set({ x: ox, y: oy, immediate: down })
    },
    { bounds }
  )
  return (
    <>
      <div>
      
    
  )
}
</div>

export function Offset({ setActive }) {
  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
  const bind = useDrag(({ down, offset: [x, y] }) => {
    setActive && setActive(down)
    set({ x, y })
  })
  return 
}

export default function Lock() {
  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
  const axis = React.useRef()
  const bind = useDrag(
    ({
      last,
      movement: [mx, my],
      direction: [dx, dy],
      memo = [x.getValue(), y.getValue()],
    }) => {
      if (!axis.current) {
        if (Math.abs(dx) > Math.abs(dy)) axis.current = 'x'
        else if (Math.abs(dy) > Math.abs(dx)) axis.current = 'y'
      }

      if (axis.current === 'x') set({ x: memo[0] + mx, immediate: true })
      else if (axis.current === 'y') set({ y: memo[1] + my, immediate: true })

      if (last) axis.current = null
      return memo

export function Swipe({ setActive }) {
  const [position, setPosition] = useState(0)
  const space = 100

  const { x } = useSpring({ x: position * space })
  const bind = useDrag(({ movement, down, swipe: [swipeX], vxvy }) => {
    setPosition(p => Math.min(Math.max(-1, p + swipeX), 1))
    setActive && setActive(down)
  })

  return (
    <>
      <div style="{{">
      <div>
      <div style="{{">
      </div></div></div>