Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProDetect a press held for a set time with pointer or keyboard, with start, cancel and click handlers, and cancel when the pointer moves away.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for hold-to-confirm buttons, hold to delete, press-and-hold to record or a long press that opens a menu on touch screens.
Do not make long press the only way to do something: it is hard for people with motor or dexterity limits. Always provide a plain click, tap or menu route too (WCAG 2.5.1, 2.5.7).
import { useLongPress } from "@/hooks/use-long-press"const press = useLongPress(() => remove(id), { threshold: 800 })
<button {...press}>Hold to delete</button>useLongPress(onLongPress, options?): props
| Option | Type | Default | Description |
|---|---|---|---|
threshold | number | 500 | Ms the press must last. |
moveTolerance | number | 10 | Pixels the pointer may move before the press is cancelled. |
onStart | () => void | - | Called when the press begins. |
onCancel | () => void | - | Called when released early or cancelled. |
onClick | () => void | - | Called for a normal short press (released before the threshold). |
The returned props go on one element: pointer down, up, move, leave and cancel, plus Enter and Space for keyboard users. After a long press the next click is suppressed so the action does not run twice. The timer is cleared on unmount.
Keyboard users hold Enter or Space for the same time. Still offer a visible alternative that needs no holding, show progress for the hold (a ring or fill, not colour alone), and announce the result.
The hook ships with renderHook tests (use-long-press.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.