Components

Sortable List

Put a list in order by dragging items by a grip, or with the keyboard, each step announced.

Rent$1800 / $1800
Groceries$412 / $500
Transport$64 / $120
Eating out$188 / $150
Fun$40 / $100

Import

import { SortableList, SortableItem, SortableHandle } from '@rinzai/zen';

API reference

<SortableList>

A list put in order by dragging, e.g. budget categories: drag an item by its SortableHandle and the others make way (a phone taps lightly at each new place); it settles into place when let go. From the keyboard, Space or Enter on a handle picks the item up, the arrow keys move it, Space or Enter drops it and Escape puts it back; each step is announced. value is the ids in order; render a SortableItem for each.

Prop	Type	Default
`onChange`Required	`(value: string[]) => void`	`—`
`value`Required The items' ids, in order.	`readonly string[]`	`—`

<SortableItem>

One item in a SortableList; give it the id it has in the list's value.

Prop	Type	Default
`id`Required	`string`	`—`

<SortableHandle>

What an item is dragged by: a grip button. label names the item ("Rent"); the button reads "Reorder Rent". It takes no scroll gestures, so dragging it never scrolls the page.

Prop	Type	Default
`id`Required The item's id, as in the list's value.	`string`	`—`
`label`Required The item's name, e.g. "Rent".	`string`	`—`