Handle pointer drag gestures with movement, velocity, direction and axis constraints
use-drag hook handles pointer drag gestures over an element. It tracks movement, velocity, direction and supports axis constraints, threshold activation and tap detection. The hook uses the Pointer Events API and works with both mouse and touch input.
Position: { x: 0, y: 0 }
Use the axis option to constrain movement to a single axis. Set axis to 'x' or 'y' for a fixed constraint, or 'lock' to lock to whichever axis has more movement after axisThreshold is exceeded:
When filterTaps is enabled, the last state includes a tap property that is true when the total distance is below tapThreshold (default 3px ). Combined with threshold , this lets you distinguish clicks from drags on the same element:
Use movement and velocity on the last event to decide whether to dismiss an item. This pattern works well for notifications:
Apply delta to a container's scrollLeft to create a drag-to-scroll interaction:
Drag horizontally to scroll
The hook uses the Pointer Events API which handles both mouse and touch automatically. For touch devices, set touch-action: none on the draggable element to prevent the browser from interpreting touch drag as scroll:
If you want to allow scrolling on one axis while dragging on the other (e.g. horizontal drag with vertical scroll), use touch-action: pan-y or touch-action: pan-x .
UseDragState , UseDragOptions and UseDragReturnValue types are exported from the @mantine/hooks package; you can import them in your application: