Skip to Content
react-utilsusePressHold

usePressHold

See source on Github 

Executes callback when the user presses and holds ref for a specified duration. Additional options can be provided to customize the gesture.

  • @param ref - The element to attach the gesture to.
  • @param callback - Function to execute when gesture is complete.
  • @param options - Configurable options
  • @param options.when - Whether press-and-hold handling is enabled.
  • @param options.axis - Axis to constrain movement to.
  • @param options.deadZone - Movement allowed before cancellation.
  • @param options.duration - Required hold duration in milliseconds.
  • @param options.onGestureStart - Called when the press starts.
  • @param options.onGestureMove - Called when the pointer moves.
  • @param options.onGestureEnd - Called when the press ends.
  • @param options.pointerType - Pointer type allowed to trigger the gesture.
  • @returns void

Example

const ref = useRef<HTMLDivElement>(null);
 
usePressHold(ref, () => {
  console.log('Press and hold gesture complete!');
}, { duration: 1000 });
 
return <div ref={ref} />;
useMutationObserveruseRTL