Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProDrag an element with the pointer and keep its x and y offset in state, with axis lock, bounds, tap tolerance, spring-back and arrow-key movement as a keyboard alternative.
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 a draggable card, a handle that moves a panel, a bottom sheet you pull down or a slider thumb you build yourself. The gesture maths comes from @use-gesture/react.
Do not use it for sortable lists or drop targets (use a drag-and-drop library), and not for plain swipes (use useSwipe).
This hook uses @use-gesture/react; the CLI installs it for you.
import { useDragGesture } from "@/hooks/use-drag-gesture"const { bind, x, y, dragging } = useDragGesture({ bounds: { left: -100, right: 100, top: 0, bottom: 0 }, keyboardStep: 10 })
<div {...bind()} tabIndex={0} style={{ transform: `translate(${x}px, ${y}px)`, touchAction: "none" }} />useDragGesture(options?): { bind, x, y, dragging, reset }
| Option | Type | Default | Description |
|---|---|---|---|
axis | "x" | "y" | - | Lock movement to one axis. |
bounds | { left?, right?, top?, bottom? } | - | Limits of the offset, in px. |
threshold | number | 3 | Pixels before a press counts as a drag (taps stay taps). |
springBack | boolean | false | Return to 0,0 on release. |
keyboardStep | number | 10 | Pixels moved per arrow key; 0 turns keyboard movement off. |
onRelease | ({ x, y, velocity, direction }) => void | - | Called when the pointer is released. |
bind() returns the handlers to spread on the element, including onKeyDown for arrow keys. Set touch-action: none on the element so the browser does not scroll while dragging.
Dragging is a pointer path gesture, so the hook adds arrow-key movement (with the same bounds) and you should also offer buttons for the same result (WCAG 2.5.7). Make the element focusable, give it a role and name, and announce its position changes.
The hook ships with renderHook tests (use-drag-gesture.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.