Drag & physics
Drag to dismiss
Flick notifications, cards or sheets away. A short drag springs back; a fling sends it flying.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { useDragDismiss } from '@vizzele/react';
function Notification({ onClose, children }) {
const ref = useDragDismiss<HTMLDivElement>({ axis: 'x', onDismiss: onClose });
return <div ref={ref} className="vz-card">{children}</div>;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
axis | 'x' | 'y' | 'x' | Drag axis. |
direction | 'both' | 'positive' | 'negative' | 'both' | Which way dismisses; the other resists. |
threshold | number | 0.4 | Fraction of size to drag before release dismisses. |
velocity | number | 700 | Flick speed (px/s) that dismisses. |
fade | boolean | true | Fade while dragging away. |
onDismiss | (dir: 1 | -1) => void | — | Remove the element here. |
Accessibility
- Always offer a visible close button too — dragging is never the only way to dismiss.