`useLongPress`

Detects a long-press gesture via pointer events. Returns a bundle of handlers you spread onto the target element. The press is cancelled if the pointer moves more than moveThreshold pixels — so scrolling won’t accidentally trigger it.


import { useLongPress } from '@wire-ui/react'
 
function PressableItem() {
  const handlers = useLongPress(
    (e) => console.log('long pressed at', e.clientX, e.clientY),
    { threshold: 500 },
  )
 
  return <div {...handlers}>Press and hold</div>
}

Parameters

Param	Type	Description
`callback`	`(event: PointerEvent) => void`	Fires once the press has been held for `threshold` ms.
`options`	`UseLongPressOptions`	See below.

Options

Option	Type	Default	Description
`threshold`	`number`	`400`	Milliseconds the pointer must stay down before the callback fires.
`moveThreshold`	`number`	`10`	Pixels of movement that cancel the press.
`onStart`	`(event: PointerEvent) => void`	—	Called on pointer down.
`onFinish`	`(event: PointerEvent) => void`	—	Called when the threshold is reached and `callback` fires.
`onCancel`	`(event: PointerEvent) => void`	—	Called when the press is cancelled by movement, release, or pointer leave.
`disabled`	`boolean`	`false`	Disable the gesture entirely.

Returns

A handler bundle to spread onto the target element.

{ onPointerDown, onPointerUp, onPointerLeave, onPointerMove, onPointerCancel }