Drag & physics
Reorder list
Drag items to reorder; the others flow out of the way with springs. Works with the keyboard too.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ReorderGroup, ReorderItem } from '@vizzele/react';
const [items, setItems] = useState(['Springs', 'Inertia', 'Gestures']);
<ReorderGroup values={items} onReorder={setItems} label="Priorities">
{items.map((item) => (
<ReorderItem key={item}>{item}</ReorderItem>
))}
</ReorderGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
values | T[] | — | The ordered data. |
onReorder | (values: T[]) => void | — | Receives the new order. |
axis | 'x' | 'y' | 'y' | List direction. |
useHandle | boolean | false | Only drag from <ReorderHandle>. |
spring | SpringConfig | SpringPreset | 'liquid' | Spring for snapping, bouncing and returning. |
label | string | — | Accessible name of the list. |
Accessibility
- Each item is focusable. Space/Enter grabs, arrow keys move, Space/Enter drops, Escape cancels.
- Every step is announced through a live region (“Position 3 of 6”).
- Items of different sizes are supported — slots are computed from real layout.