Function useTouchGesture

web/hooks/useTouchGesture.ts:28–111

(options: TouchGestureOptions = {})

}

export function useTouchGesture(options: TouchGestureOptions = {}): TouchGestureHandlers {
  const {
    threshold = 50,
    velocityThreshold = 0.2,
    onSwipe,
    onSwipeLeft,
    onSwipeRight,
    onSwipeUp,
    onSwipeDown,
    onLongPress,
    longPressDelay = 500,
  } = options;

  const startRef = useRef<{ x: number; y: number; time: number } | null>(null);
  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const hasMoved = useRef(false);

  const onTouchStart = useCallback(
    (e: React.TouchEvent) => {
      const touch = e.touches[0];
      startRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
      hasMoved.current = false;

      if (onLongPress) {
        longPressTimer.current = setTimeout(() => {
          if (!hasMoved.current) onLongPress();
        }, longPressDelay);
      }
    },
    [onLongPress, longPressDelay]
  );

  const onTouchMove = useCallback((_e: React.TouchEvent) => {
    hasMoved.current = true;
    if (longPressTimer.current) {
      clearTimeout(longPressTimer.current);
      longPressTimer.current = null;
    }
  }, []);

  const onTouchEnd = useCallback(
    (e: React.TouchEvent) => {
      if (longPressTimer.current) {
        clearTimeout(longPressTimer.current);
        longPressTimer.current = null;
      }

      if (!startRef.current) return;

      const touch = e.changedTouches[0];
      const dx = touch.clientX - startRef.current.x;
      const dy = touch.clientY - startRef.current.y;
      const dt = Date.now() - startRef.current.time;
      startRef.current = null;

      if (dt === 0) return;
      const velocity = Math.sqrt(dx * dx + dy * dy) / dt;