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} />

GestureStartEvent

A synthetic gesture event that is triggered when the pointer pressed down.

GestureMoveEvent

A synthetic gesture event that is triggered when the pointer device is pressed down and moving.

GestureEndEvent

A synthetic gesture event that is triggered when the pointer device is released.

GesturePosition

The current position of pointer device at a given time during the gesture.

GestureMovement

The pointer device rate of travel in both axes. Calculated between move events.

GestureDelta

The delta between current pointer position in relation to initial gesture position.

GestureDirection

The general direction pointer device is traveling over the course of the gesture.

GesturePointerType

The type of pointer device used for the current gesture.