useLongPress.ts

import { useEffect, useRef } from 'react';

export type UseLongPressOpts = {
  callback: () => void;
  delay: number;
  distanceThreshold?: number;
};

export function useLongPress({ callback, delay, distanceThreshold = 40 }: UseLongPressOpts) {
  const timerRef = useRef<NodeJS.Timeout | void>();
  const moveStartXRef = useRef<number>();
  const moveStartYRef = useRef<number>();

  function handleMouseMove() {
    document.addEventListener('mousemove', (e) => {
      const { clientX, clientY } = e;

      if (!moveStartXRef.current && !moveStartYRef.current) {
        moveStartXRef.current = clientX;
        moveStartYRef.current = clientY;
      }

      const distance = Math.hypot(clientX - moveStartXRef.current!, clientY - moveStartYRef.current!);

      if (distance > distanceThreshold) {
        timerRef.current && clearTimeout(timerRef.current);
        document.removeEventListener('mousemove', handleMouseMove);
      }
    });
  }

  function handleTouchMove() {
    document.addEventListener('touchmove', (e) => {
      const { clientX, clientY } = e.touches[0]!;

      if (!moveStartXRef.current && !moveStartYRef.current) {
        moveStartXRef.current = clientX;
        moveStartYRef.current = clientY;
      }

      const distance = Math.hypot(clientX - moveStartXRef.current!, clientY - moveStartYRef.current!);

      if (distance > distanceThreshold) {
        timerRef.current && clearTimeout(timerRef.current);
        document.removeEventListener('touchmove', handleTouchMove);
      }
    });
  }

  function startPressTimer() {
    timerRef.current = setTimeout(callback, delay);
  }

  function clearPressTimerAndCoordRefs() {
    timerRef.current && clearTimeout(timerRef.current);
    moveStartXRef.current = undefined;
    moveStartYRef.current = undefined;
  }

  function onMouseDown() {
    startPressTimer();
    document.addEventListener('mousemove', handleMouseMove);
  }

  function onMouseUp() {
    clearPressTimerAndCoordRefs();
    document.removeEventListener('mousemove', handleMouseMove);
  }

  function onTouchStart() {
    startPressTimer();
    document.addEventListener('touchmove', handleTouchMove);
  }

  function onTouchEnd() {
    clearPressTimerAndCoordRefs();
    document.removeEventListener('touchmove', handleTouchMove);
  }

  useEffect(() => {
    return () => {
      clearPressTimerAndCoordRefs();
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('touchmove', handleTouchMove);
    };
  }, []);

  return {
    onMouseDown,
    onMouseUp,
    onTouchEnd,
    onTouchStart,
  };
}