use-long-press

use-long-press is a lightweight React hook that detects long-press — click, tap, or point and hold — interactions and fires a callback when the user holds long enough. It works across mouse, touch, and pointer events, so a single hook covers desktop and mobile, and returns a handler binder you spread onto any element.

Beyond the basic detect-and-fire behaviour, it offers a rich options surface: configurable threshold, movement-based cancellation, custom context passed through to callbacks, event filtering (for example to ignore right clicks), lifecycle callbacks (onStart, onMove, onFinish, onCancel), and the ability to disable the hook conditionally. It is the flagship library of the minwork/react monorepo and is fully typed and thoroughly tested.

What You Get

• A useLongPress hook that returns a handler binder to spread onto any element
• Unified support for mouse, touch, and pointer events across desktop and mobile
• Configurable hold threshold, movement-based cancellation, and event filtering
• Lifecycle callbacks (onStart, onMove, onFinish, onCancel) plus custom context passthrough
• First-class TypeScript types and the ability to disable the hook conditionally

Common Use Cases

• Triggering a context menu or secondary action on press-and-hold
• Adding tap-and-hold interactions to mobile web UIs
• Implementing press-to-confirm or press-to-reveal controls
• Distinguishing a deliberate hold from an accidental tap via threshold and movement limits

Under The Hood

Architecture - The library lives in packages/use-long-press/src/lib, split into use-long-press.ts (the hook and its timing/binding logic), use-long-press.types.ts (the extensive typed options and callback contracts), and use-long-press.utils.ts (event normalization and helpers). The hook starts a timer on press start, cancels it on movement beyond the tolerance or on early release, and invokes the appropriate lifecycle callback, returning a binder so the same configuration can be applied to multiple elements.

Tech Stack - Written in TypeScript (99%+) with React >= 16.8 as the only peer dependency (it relies on hooks). The monorepo is managed with Nx and Yarn, built with Babel, and released via semantic-release; the package ships with no runtime dependencies.

Code Quality - The package has a strong test suite under src/tests including behavioural tests (use-long-press.test.tsx) and type-level tests (use-long-press.test-d.ts, test.types.ts), with coverage tracked on Codecov and interactive Storybook documentation. The clear separation of hook, types, and utils plus type-level testing signals careful attention to both runtime correctness and API typing.

API Design - The binder pattern — useLongPress returns a function you call and spread — is an elegant touch that lets one configured hook attach to many elements while forwarding per-element context. The options object is broad but well-typed and each field maps to a clear interaction concern, keeping the common case a one-liner while supporting advanced gesture tuning.