useLongPress

React sensor hook that fires a callback after long pressing

useLongPress detects long-press gestures on any element by tracking mousedown/mouseup and touchstart/touchend events. It returns an object of event handlers that you spread onto the target element. When the user presses and holds for the configured delay (default: 300ms), the callback fires. The hook supports both mouse and touch interactions and can optionally prevent default browser behavior.

When to Use

• Adding context-menu-like actions triggered by long press on mobile and desktop
• Implementing “press and hold to delete” or “press and hold to confirm” interactions
• Building touch-friendly interfaces with long-press gestures for secondary actions

Notes

• SSR-safe: Returns no-op event handlers during server-side rendering. No window or document access occurs on the server.
• Touch and mouse: Handles both pointer types. The isPreventDefault option (default: true) prevents text selection and context menus during the press.
• Customizable delay: Set the delay option in milliseconds to control how long the user must press before the callback fires.

Usage

function Demo() {
  const [state, setState] = useState("No Press");
  const onLongPress = () => {
    setState("Long Pressed!");
  };

  const defaultOptions = {
    isPreventDefault: true,
    delay: 300,
  };
  const longPressEvent = useLongPress(onLongPress, defaultOptions);

  return (
    <div>
      <button {...longPressEvent}>useLongPress</button>
      <button onClick={() => setState("No Press")}>Reset</button>
      <div>Pressed: {state}</div>
    </div>
  );
};

API

useLongPress

Returns

{ readonly onMouseDown: (e: any) => void; readonly onTouchStart: (e: any) => void; readonly onMouseUp: () => void; readonly onMouseLeave: () => void; readonly onTouchEnd: () => void; }: A object with the following elements:

• onMouseDown: Mouse down event.
• onTouchStart: Finger touch start event.
• onMouseUp: Mouse up event.
• onMouseLeave: Mouse leave event.
• onTouchEnd: Finger touch end event.

Arguments

UseLongPressOptions