Reorder list
Drag-to-reorder list with grab handles, a lifted dragging row, edge auto-scroll in a scroll area, and keyboard reordering (Space, arrows, Space or Escape) with live announcements.
Preview
Q4 priorities
Drag a grip, or focus it and press Space, then the arrows
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| values | T[] | — | Items in their current order. |
| onReorder | (values: T[]) => void | — | Called with the new order after a drag or keyboard move. |
| getKey / getLabel | (item: T) => string | — | Stable key, and the plain-text name used by the grip and announcements. |
| renderItem | (item: T, { index, dragging }) => ReactNode | — | Row content; the grip is drawn for you. |
| label | string | "Reorderable list" | Accessible name of the list. |
| maxHeight | number | — | Caps the height in px; the list scrolls and auto-scrolls near edges while dragging. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.