useLongPress

A React hook for handling long press gestures on elements with customizable duration and callbacks. Supports both mouse and touch events with TypeScript type safety.

Interactive Demo

Long press count: 0

Implementation

interface UseLongPressOptions {
  delay?: number;
  onStart?: () => void;
  onFinish?: () => void;
  onCancel?: () => void;
}

export function useLongPress(options: UseLongPressOptions = {}) {
  const { delay = 400, onStart, onFinish, onCancel } = options;
  const [isPressed, setIsPressed] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout>(null);

  const start = useCallback(() => {
    onStart?.();
    setIsPressed(true);
    timeoutRef.current = setTimeout(() => {
      onFinish?.();
      setIsPressed(false);
    }, delay);
  }, [delay, onStart, onFinish]);

  const cancel = useCallback(() => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
      onCancel?.();
      setIsPressed(false);
    }
  }, [onCancel]);

  const handlers = {
    onMouseDown: start,
    onMouseUp: cancel,
    onMouseLeave: cancel,
    onTouchStart: start,
    onTouchEnd: cancel,
  };

  return { isPressed, handlers };
}

Usage Examples

import { useLongPress } from '@/components/hooks/useLongPress';

function LongPressExample() {
  const { isPressed, handlers } = useLongPress({
    delay: 1000,
    onStart: () => console.log('Started pressing'),
    onFinish: () => console.log('Long press completed'),
    onCancel: () => console.log('Press cancelled'),
  });

  return (
    <button
      {...handlers}
      className={isPressed ? 'active' : ''}
    >
      Press and Hold
    </button>
  );
}

Documentation

Key Features

  • Customizable press duration
  • Support for both mouse and touch events
  • Callback functions for press start, finish, and cancel
  • Real-time press state tracking
  • TypeScript support
  • Automatic cleanup of timeouts

Common Use Cases

  • Context menu alternatives
  • Delete confirmations
  • Gaming controls
  • Mobile-friendly interactions
  • Custom gesture controls

API Reference

useLongPress(options: UseLongPressOptions)

Returns an object containing the press state and event handlers.

Options:

  • delay?: number (default: 400ms)
  • onStart?: () => void
  • onFinish?: () => void
  • onCancel?: () => void

Returns:

  • isPressed: boolean
  • handlers: Event handlers object

Browser Compatibility

The hook uses standard mouse and touch events, which are supported in all modern browsers. For touch events, ensure your target platform supports touch interactions.