useLongPress()

The useLongPress() hook allows you to detect sustained clicks or touches on an element. It differentiates between a standard "click" and a "long press," making it ideal for secondary actions, context menus, or specialized game controls.

Import

typescript

import { useLongPress } from 'the-react-hooks';

Usage

Action Status

LOCKED 🔒

Clicking does nothing.
Press and hold for 0.7s to unlock.

Component.tsx

import { useLongPress } from 'the-react-hooks';
import { useState } from 'react';

export const Component = () => {
  const [count, setCount] = useState(0);

  const onLongPress = () => {
    alert('Long press detected!');
  };

  const bind = useLongPress(onLongPress, {
    delay: 700,
    shouldPreventDefault: true,
  });

  return (
    <button {...bind} className="btn">
      Press and Hold Me
    </button>
  );
}

API

Arguments

callback – (event) => void The function to execute when the long press is detected.
options – object Optional configuration object (see below).

Options Object:

delay: number (default: 500) - Time in ms before triggering.
shouldPreventDefault: boolean (default: true) - Whether to prevent the default click event on long press.

Returns

Returns an object of event handlers to spread onto the target element:

onMouseDown, onTouchStart – Starts the timer.
onMouseUp, onMouseLeave, onTouchEnd – Clears the timer.
onClick – Handles preventing the default action if a long press occurred.

PrevioususeLockBodyScroll NextuseMediaQuery