main 🧊 add use swipe

debabin · debabin · commit 3ddebb2410eb · 2026-04-16T20:20:32.000+07:00
diff --git a/packages/core/src/bundle/hooks/sensors.js b/packages/core/src/bundle/hooks/sensors.js
@@ -27,6 +27,7 @@ export * from './useScroll/useScroll';
 export * from './useScrollIntoView/useScrollIntoView';
 export * from './useScrollTo/useScrollTo';
 export * from './useSize/useSize';
+export * from './useSwipe/useSwipe';
 export * from './useTextSelection/useTextSelection';
 export * from './useVisibility/useVisibility';
 export * from './useWindowEvent/useWindowEvent';
diff --git a/packages/core/src/bundle/hooks/useSwipe/useSwipe.js b/packages/core/src/bundle/hooks/useSwipe/useSwipe.js
@@ -0,0 +1,174 @@
+import { useEffect, useRef, useState } from 'react';
+import { isTarget } from '@/utils/helpers';
+import { useRefState } from '../useRefState/useRefState';
+import { useRerender } from '../useRerender/useRerender';
+const DEFAULT_SWIPE_THRESHOLD = 50;
+const getCoords = (event) => {
+  if ('touches' in event) {
+    const touch = event.touches[0] ?? event.changedTouches[0];
+    if (!touch) return;
+    return {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+  }
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+};
+/**
+ * @name useSwipe
+ * @description - Hook that tracks swipe gestures for touch and pointer events
+ * @category Sensors
+ * @usage low
+ *
+ * @overload
+ * @param {HookTarget} target The target element to track swipe on
+ * @param {UseSwipeCallback} [callback] Swipe move callback
+ * @returns {UseSwipeReturn} Swipe state
+ *
+ * @example
+ * const swipe = useSwipe(ref, (value) => console.log(value.direction));
+ *
+ * @overload
+ * @template Target The target element
+ * @param {UseSwipeCallback} [callback] Swipe move callback
+ * @returns {UseSwipeReturn & { ref: StateRef<Target> }} Swipe state and ref
+ *
+ * @example
+ * const swipe = useSwipe<HTMLDivElement>((value) => console.log(value.direction));
+ *
+ * @overload
+ * @param {HookTarget} target The target element to track swipe on
+ * @param {UseSwipeOptions} [options] Swipe options
+ * @returns {UseSwipeReturn} Swipe state
+ *
+ * @example
+ * const swipe = useSwipe(ref);
+ *
+ * @overload
+ * @template Target The target element
+ * @param {UseSwipeOptions} [options] Swipe options
+ * @returns {UseSwipeReturn & { ref: StateRef<Target> }} Swipe state and ref
+ *
+ * @example
+ * const swipe = useSwipe<HTMLDivElement>();
+ */
+export const useSwipe = (...params) => {
+  const target = isTarget(params[0]) ? params[0] : undefined;
+  const options = target
+    ? typeof params[1] === 'function'
+      ? { ...params[2], onMove: params[1] }
+      : params[1]
+    : typeof params[0] === 'function'
+      ? { ...params[1], onMove: params[0] }
+      : params[0];
+  const [swiping, setSwiping] = useState(false);
+  const internalRef = useRefState();
+  const snapshotRef = useRef({
+    direction: 'none',
+    lengthX: 0,
+    lengthY: 0
+  });
+  const swipingRef = useRef(false);
+  const watchingRef = useRef(false);
+  const rerender = useRerender();
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const watch = () => {
+    watchingRef.current = true;
+    return snapshotRef.current;
+  };
+  useEffect(() => {
+    if (!target && !internalRef.state) return;
+    const element = target ? isTarget.getElement(target) : internalRef.current;
+    if (!element) return;
+    let start;
+    const getCurrentDirection = (x, y) => {
+      const absX = Math.abs(x);
+      const absY = Math.abs(y);
+      const maxLength = Math.max(absX, absY);
+      const threshold = optionsRef.current?.threshold ?? DEFAULT_SWIPE_THRESHOLD;
+      if (maxLength < threshold) return 'none';
+      if (absX > absY) return x > 0 ? 'left' : 'right';
+      return y > 0 ? 'up' : 'down';
+    };
+    const onStart = (event) => {
+      if (swipingRef.current) return;
+      const coords = getCoords(event);
+      if (!coords) return;
+      start = coords;
+      const nextValue = {
+        direction: 'none',
+        lengthX: 0,
+        lengthY: 0
+      };
+      swipingRef.current = true;
+      setSwiping(true);
+      snapshotRef.current = nextValue;
+      optionsRef.current?.onStart?.(nextValue, event);
+      if (watchingRef.current) rerender();
+    };
+    const onMove = (event) => {
+      if (!swipingRef.current || !start) return;
+      const coords = getCoords(event);
+      if (!coords) return;
+      const nextLengthX = start.x - coords.x;
+      const nextLengthY = start.y - coords.y;
+      snapshotRef.current = {
+        direction: getCurrentDirection(nextLengthX, nextLengthY),
+        lengthX: nextLengthX,
+        lengthY: nextLengthY
+      };
+      optionsRef.current?.onMove?.(snapshotRef.current, event);
+      if (watchingRef.current) rerender();
+    };
+    const onEnd = (event) => {
+      if (!swipingRef.current || !start) return;
+      const coords = getCoords(event);
+      const x = coords ? start.x - coords.x : snapshotRef.current.lengthX;
+      const y = coords ? start.y - coords.y : snapshotRef.current.lengthY;
+      const nextValue = {
+        direction: getCurrentDirection(x, y),
+        lengthX: x,
+        lengthY: y
+      };
+      swipingRef.current = false;
+      setSwiping(false);
+      snapshotRef.current = nextValue;
+      optionsRef.current?.onEnd?.(nextValue, event);
+      if (watchingRef.current) rerender();
+      start = undefined;
+    };
+    const onPointerStart = (event) => {
+      if (!event.isPrimary) return;
+      onStart(event);
+    };
+    const onPointerMove = (event) => onMove(event);
+    const onPointerEnd = (event) => onEnd(event);
+    const onTouchStart = (event) => onStart(event);
+    const onTouchMove = (event) => onMove(event);
+    const onTouchEnd = (event) => onEnd(event);
+    element.addEventListener('pointerdown', onPointerStart);
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerEnd);
+    window.addEventListener('pointercancel', onPointerEnd);
+    element.addEventListener('touchstart', onTouchStart);
+    window.addEventListener('touchmove', onTouchMove);
+    window.addEventListener('touchend', onTouchEnd);
+    window.addEventListener('touchcancel', onTouchEnd);
+    return () => {
+      element.removeEventListener('pointerdown', onPointerStart);
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', onPointerEnd);
+      window.removeEventListener('pointercancel', onPointerEnd);
+      element.removeEventListener('touchstart', onTouchStart);
+      window.removeEventListener('touchmove', onTouchMove);
+      window.removeEventListener('touchend', onTouchEnd);
+      window.removeEventListener('touchcancel', onTouchEnd);
+    };
+  }, [target && isTarget.getRawElement(target), internalRef.state]);
+  if (target) return { swiping, snapshot: snapshotRef.current, watch };
+  return { ref: internalRef, swiping, snapshot: snapshotRef.current, watch };
+};
diff --git a/packages/core/src/hooks/sensors.ts b/packages/core/src/hooks/sensors.ts
@@ -27,6 +27,7 @@ export * from './useScroll/useScroll';
 export * from './useScrollIntoView/useScrollIntoView';
 export * from './useScrollTo/useScrollTo';
 export * from './useSize/useSize';
+export * from './useSwipe/useSwipe';
 export * from './useTextSelection/useTextSelection';
 export * from './useVisibility/useVisibility';
 export * from './useWindowEvent/useWindowEvent';
diff --git a/packages/core/src/hooks/useSwipe/useSwipe.demo.tsx b/packages/core/src/hooks/useSwipe/useSwipe.demo.tsx
@@ -0,0 +1,80 @@
+import { useSwipe } from '@siberiacancode/reactuse';
+import { useRef } from 'react';
+
+const Demo = () => {
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  const setCardStyles = (x: number) => {
+    if (!cardRef.current) return;
+    cardRef.current.style.transform = `translateX(${x}px)`;
+  };
+
+  const swipe = useSwipe<HTMLDivElement>({
+    onStart: () => {
+      document.body.style.userSelect = 'none';
+    },
+    onMove: (value) => {
+      if (!cardRef.current) return;
+
+      if (value.lengthX >= 0) {
+        setCardStyles(0);
+        return;
+      }
+
+      const distance = Math.abs(value.lengthX);
+      setCardStyles(distance);
+    },
+    onEnd: (value) => {
+      if (!cardRef.current) return;
+
+      const width = cardRef.current.offsetWidth ?? 0;
+      const swipeDistance = value.lengthX < 0 ? Math.abs(value.lengthX) : 0;
+      const shouldDismiss = width > 0 && swipeDistance / width >= 0.5;
+
+      if (shouldDismiss) {
+        setCardStyles(width);
+      } else {
+        setCardStyles(0);
+      }
+    }
+  });
+
+  const cardClassName = [
+    'absolute inset-0 flex select-none items-center justify-center rounded-xl bg-[var(--vp-c-brand-1)]',
+    swipe.swiping ? '' : 'transition-all duration-200 ease-linear'
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      ref={swipe.ref}
+      className='relative mx-auto flex h-[96px] w-full max-w-md items-center justify-center overflow-hidden rounded-xl border-2 border-dashed border-white select-none'
+    >
+      <button
+        className='rounded-md bg-white px-3 py-1 text-sm font-medium'
+        type='button'
+        onClick={() => {
+          if (!cardRef.current) return;
+          setCardStyles(0);
+        }}
+      >
+        Reset
+      </button>
+
+      <div
+        ref={cardRef}
+        style={{
+          transform: 'translateX(0)',
+          opacity: 1,
+          touchAction: 'pan-y'
+        }}
+        className={cardClassName}
+      >
+        <p className='shrink-0 whitespace-nowrap text-white'>Swipe left to right</p>
+      </div>
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/packages/core/src/hooks/useSwipe/useSwipe.test.ts b/packages/core/src/hooks/useSwipe/useSwipe.test.ts
diff --git a/packages/core/src/hooks/useSwipe/useSwipe.ts b/packages/core/src/hooks/useSwipe/useSwipe.ts
