useLongPress

UI/Interaction

A React hook that handles both normal press and long press interactions with progress tracking, supporting mouse and touch events.

Installation

npm install @thibault.sh/hooks

API Reference

Signature


interface LongPressOptions {
  delay?: number;
  preventContext?: boolean;
  onPress?: () => void;
  onLongPress?: () => void;
  onLongPressCanceled?: () => void;
}

interface PressState {
  isPressed: boolean;
  isLongPressed: boolean;
  progress: number;
}

function useLongPress(options?: LongPressOptions): {
  handlers: EventHandlers;
  state: PressState;
}

Parameters

Name	Type	Description	Default
`options` optional	LongPressOptions	Configuration options for the long press behavior.	-
`options.delay` optional	number	Duration in milliseconds before triggering long press.	`400`
`options.preventContext` optional	boolean	Whether to prevent context menu on long press.	`true`
`options.onPress` optional	() => void	Callback for normal press (when released before delay).	-
`options.onLongPress` optional	() => void	Callback for successful long press (when delay is reached).	-
`options.onLongPressCanceled` optional	() => void	Callback when long press is interrupted.	-

Returns

{ handlers: EventHandlers; state: PressState }

An object containing event handlers and current press state.

Properties:

Property	Type	Description
`handlers`	EventHandlers	Event handlers to spread on your element.
`state.isPressed`	boolean	Whether the element is currently being pressed.
`state.isLongPressed`	boolean	Whether the press has exceeded the long press threshold.
`state.progress`	number	Progress towards completing a long press (0 to 1).