useGesture - Accelerator Docs

`useGesture`

Attaches synthetic gesture events on the provided ref whose triggers can be constrained via axis, pointerType, deadZone, and lifespan options.

When a valid gesture is detected, onGestureStart, onGestureMove, and onGestureEnd callbacks are invoked, allowing for custom behavior to be implemented.

If a gesture is deemed invalid, the gesture can be aborted by calling the abort method on the returned event object, in which case the onGestureEnd callback is called immediately.

@param ref - A RefObject of the element to observe.
@param options - Configurable options
@returns void

Example


const ref = useRef<HTMLDivElement>(null)
 
useGesture(ref, {
  onGestureStart: ({ x, y }) => console.log('Gesture started at:', x, y),
  onGestureMove: ({ deltaX, deltaY }) => console.log('Gesture moved by:', deltaX, deltaY),
  onGestureEnd: ({ deltaX, deltaY }) => console.log('Gesture ended at:', deltaX, deltaY)
})
 
return <div ref={ref} />