@thibault.sh/hooks/dist/useLongPress.d.ts

A comprehensive collection of React hooks for browser storage, UI interactions, and more

/**
 * Configuration options for the useLongPress hook
 */
interface LongPressOptions {
    /** Duration in milliseconds before long press is triggered (default: 400) */
    delay?: number;
    /** Whether to disable context menu on long press (default: true) */
    preventContext?: boolean;
    /** Callback fired when a normal press (shorter than delay) is completed */
    onPress?: () => void;
    /** Callback fired when a long press is successfully triggered */
    onLongPress?: () => void;
    /** Callback fired when a long press is canceled before completion */
    onLongPressCanceled?: () => void;
}
/**
 * A hook that handles both normal press and long press interactions
 *
 * @param options - Configuration options for the long press behavior
 * @param options.delay - Duration in milliseconds before a press is considered a long press (default: 400)
 * @param options.preventContext - When true, prevents the default context menu on long press (default: true)
 * @param options.onPress - Callback fired when a normal press (shorter than delay) is completed.
 *                         Triggers only if the press duration was less than the specified delay
 * @param options.onLongPress - Callback fired when a long press is successfully triggered.
 *                             Triggers exactly once when the press duration exceeds the delay
 * @param options.onLongPressCanceled - Callback fired when a long press is canceled before completion.
 *                                     Triggers if the press is released or canceled before reaching the delay threshold
 * @returns Object containing event handlers and current press state
 *
 * @example
 * ```tsx
 * const MyComponent = () => {
 *   const { handlers, state } = useLongPress({
 *     delay: 1000,
 *     onPress: () => console.log('Normal press'),
 *     onLongPress: () => console.log('Long press completed'),
 *     onLongPressCanceled: () => console.log('Long press canceled'),
 *   });
 *
 *   return (
 *     <button {...handlers}>
 *       {state.isLongPressed
 *         ? 'Long Press!'
 *         : `Hold me (${Math.round(state.progress * 100)}%)`}
 *     </button>
 *   );
 * };
 * ```
 */
declare function useLongPress(options?: LongPressOptions): {
    /** Event handlers to attach to the target element */
    handlers: {
        onMouseDown: (event: React.TouchEvent | React.MouseEvent) => void;
        onMouseUp: (event: React.TouchEvent | React.MouseEvent) => void;
        onMouseLeave: (event: React.TouchEvent | React.MouseEvent) => void;
        onTouchStart: (event: React.TouchEvent | React.MouseEvent) => void;
        onTouchEnd: (event: React.TouchEvent | React.MouseEvent) => void;
        onTouchCancel: (event: React.TouchEvent | React.MouseEvent) => void;
    };
    /** Current state of the press interaction */
    state: {
        isPressed: boolean;
        isLongPressed: boolean;
        progress: number;
    };
};

export { useLongPress };