Skip to main content

useSwipe()

Detects swipe gestures on a DOM element, returning the swipe direction (left, right, up, down). Ideal for mobile-friendly interfaces like carousels or navigation menus.

Import​

import { useSwipe } from "reactuals";

Demo​

Loading...

Usage​

import { useSwipe } from "reactuals";

function Swipe() {
  const [ref, direction] = useSwipe({ threshold: 50 });

  return (
    <div
      ref={ref}
      className="w-full h-64 bg-gray-200 flex items-center justify-center"
    >
      {direction ? (
        <p className="text-xl font-bold">Swiped {direction}!</p>
      ) : (
        <p className="text-xl">Swipe me!</p>
      )}
    </div>
  );
}