useLongPress

const bind = useLongPress(callback, options?);
// <button {...bind}>Press and hold</button>

Parameters

Parameter	Type	Description
callback	(event) => void	Fires once when the press reaches threshold. Receives the originating pointer-down event.
options	UseLongPressOptions	Optional configuration (see below).

Options

Option	Type	Default	Description
threshold	number	400	Milliseconds the press must be held before callback fires.
moveThreshold	number | false	10	Pixels the pointer may drift from the down point before cancelling (reason "moved"). false disables movement cancellation.
disabled	boolean	false	When true, the handlers are no-ops (read at press-start).
onStart	(event) => void	—	Fires when a valid press begins, before the timer starts.
onFinish	(event) => void	—	Fires when a completed long press is then released.
onCancel	(event, { reason }) => void	—	Fires when a press ends early — reason is "released" or "moved".

Returns

bind — a stable object of DOM handler props: onMouseDown, onMouseUp, onMouseLeave, onMouseMove, onTouchStart, onTouchEnd, onTouchMove. Spread it onto the target element to wire up the whole gesture.

preventDefault caveat

React attaches onTouchStart/onTouchMove as passive listeners, so calling event.preventDefault() inside them will not stop scrolling or the long-press context menu (the browser ignores it). Prevent those with CSS on the target instead:

.long-press-target {
  touch-action: none;      /* stop scroll/pan while pressing */
  user-select: none;       /* stop text selection */
  -webkit-touch-callout: none; /* stop the iOS callout menu */
}

This hook deliberately never calls preventDefault.

Touch / mouse de-duplication

After a touch sequence, browsers emit synthetic mousedown/mouseup/click events. useLongPress timestamps the last touch event and ignores any mousedown that arrives within a short guard window, so a single touch long-press fires exactly once. Pure-mouse and pure-touch devices are unaffected.