kinetic-slider/dist/esm/hooks/useTouchSwipe.js

A WebGL-powered kinetic slider component using PIXI.js

import { useRef, useEffect } from 'react';

const isDevelopment = false;
const useTouchSwipe = ({
  sliderRef,
  onSwipeLeft,
  onSwipeRight,
  threshold,
  thresholdFraction = 0.2,
  // Default: 20% of screen width
  minSwipeDistance = 30,
  // Default minimum swipe distance in pixels
  resourceManager
}) => {
  const touchStateRef = useRef({
    touchStartX: 0,
    touchStartY: 0,
    touchEndX: 0,
    touchEndY: 0,
    swiping: false
  });
  useEffect(() => {
    if (typeof window === "undefined") return;
    const slider = sliderRef.current;
    if (!slider) {
      return;
    }
    const calculateThreshold = () => {
      if (threshold !== void 0) return threshold;
      const baseWidth = slider.clientWidth || window.innerWidth;
      const calculatedThreshold = baseWidth * thresholdFraction;
      return Math.max(calculatedThreshold, minSwipeDistance);
    };
    const handleTouchStart = (e) => {
      try {
        const touchEvent = e;
        if (!touchEvent.touches || touchEvent.touches.length === 0) return;
        touchStateRef.current.touchStartX = touchEvent.touches[0].clientX;
        touchStateRef.current.touchStartY = touchEvent.touches[0].clientY;
        touchStateRef.current.swiping = true;
        if (isDevelopment) ;
      } catch (error) {
      }
    };
    const handleTouchMove = (e) => {
      try {
        const touchEvent = e;
        if (!touchStateRef.current.swiping || !touchEvent.touches || touchEvent.touches.length === 0) return;
        touchStateRef.current.touchEndX = touchEvent.touches[0].clientX;
        touchStateRef.current.touchEndY = touchEvent.touches[0].clientY;
      } catch (error) {
      }
    };
    const handleTouchEnd = () => {
      try {
        if (!touchStateRef.current.swiping) return;
        const { touchStartX, touchStartY, touchEndX, touchEndY } = touchStateRef.current;
        const deltaX = touchEndX - touchStartX;
        const deltaY = touchEndY - touchStartY;
        const swipeThreshold = calculateThreshold();
        const absX = Math.abs(deltaX);
        const absY = Math.abs(deltaY);
        if (isDevelopment) ;
        if (absX > absY && absX > swipeThreshold) {
          if (deltaX < 0) {
            if (isDevelopment) ;
            onSwipeLeft();
          } else {
            if (isDevelopment) ;
            onSwipeRight();
          }
        }
        touchStateRef.current.swiping = false;
      } catch (error) {
        touchStateRef.current.swiping = false;
      }
    };
    const handleTouchCancel = () => {
      try {
        if (isDevelopment) ;
        touchStateRef.current.swiping = false;
      } catch (error) {
        touchStateRef.current.swiping = false;
      }
    };
    if (resourceManager) {
      resourceManager.addEventListener(slider, "touchstart", handleTouchStart);
      resourceManager.addEventListener(slider, "touchmove", handleTouchMove);
      resourceManager.addEventListener(slider, "touchend", handleTouchEnd);
      resourceManager.addEventListener(slider, "touchcancel", handleTouchCancel);
    } else {
      slider.addEventListener("touchstart", handleTouchStart, { passive: true });
      slider.addEventListener("touchmove", handleTouchMove, { passive: true });
      slider.addEventListener("touchend", handleTouchEnd);
      slider.addEventListener("touchcancel", handleTouchCancel);
    }
    return () => {
      if (!resourceManager) {
        slider.removeEventListener("touchstart", handleTouchStart);
        slider.removeEventListener("touchmove", handleTouchMove);
        slider.removeEventListener("touchend", handleTouchEnd);
        slider.removeEventListener("touchcancel", handleTouchCancel);
      }
    };
  }, [
    sliderRef,
    onSwipeLeft,
    onSwipeRight,
    threshold,
    thresholdFraction,
    minSwipeDistance,
    resourceManager
  ]);
};

export { useTouchSwipe as default };
//# sourceMappingURL=useTouchSwipe.js.map