Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProDetect swipes left, right, up and down on an element with a distance threshold and a time limit, returning props to spread on it.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for swipeable cards, a simple carousel, a drawer that closes on swipe or a mobile image viewer. It is light and has no dependency.
Do not use it for dragging with a live offset, momentum or rubber-banding; use useDragGesture. Never make swipe the only way: add buttons or keys.
import { useSwipe } from "@/hooks/use-swipe"const swipe = useSwipe({ onSwipe: (direction) => direction === "left" && next() })
<div {...swipe} style={{ touchAction: "pan-y" }}>...</div>useSwipe(options): props
| Option | Type | Default | Description |
|---|---|---|---|
onSwipe | (direction: "left" | "right" | "up" | "down") => void | - | Called when a swipe ends. |
threshold | number | 50 | Minimum distance in px. |
maxTime | number | 600 | Longest press, in ms, that still counts as a swipe. |
The direction is the dominant axis of the movement, in physical terms. In a right-to-left layout map left and right to previous and next yourself. Set touch-action (for example pan-y) on the element so the browser keeps the scroll you want. Handlers use pointer events, so mouse, touch and pen work.
A swipe is a gesture with a pointer path. Always offer single-pointer buttons or keyboard keys that do the same thing (WCAG 2.5.1), such as Previous and Next buttons, and announce the result.
The hook ships with renderHook tests (use-swipe.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.