createReorderable@astryxdesign/core v0.7.5 · createReorderable

Usage

Makes a collection's rows reorderable the way an iOS table's edit mode does. On a touch screen a finger held still on a row's handle for a moment picks it up (a flick on the handle still scrolls); the row follows the finger, the rows it passes slide out of its way, the page scrolls near its edges, and on release the row settles into its new place. A mouse drags a handle at once, and the rows take their places without motion. Without a drag, the handle toggles reorder mode for its row (a click, Space or Enter): each arrow key moves the row a place at once, and Escape or another activation ends the mode, keeping the moves; screen readers hear each move with the row's place and neighbours, and a hint shows the moves and Done as buttons, for taps alone. The reorder code ships with this function: a collection without the prop loads none of it.

ts
import {createReorderable} from '@astryxdesign/core/reorderable'

Best practices

GuidancePractices
Do

Give each row a stable string key from your data (itemKey={item.id}), and apply each move by rendering the items in their new order in the same task.

Do

Use isReorderable for rows that must stay put, such as a pinned first row.

Do

Offer reorder mode from your own UI too, such as a row's context menu, with reorderable.start(item.id).

Don't

Use React's key as the reorder key, or index-based keys: a move changes every index after it.

Parameters

ParamTypeDescription
onReorderrequired
(move: {key:
; to: number}) => void

Called once per committed move (a drop, or each move in reorder mode) with the moved item's key and its index after the move, in the full order of the collection's items. Apply it by rendering the items in their new order. A cancelled move calls nothing. The latest function given is the one called, so the object may be made on every render.

isReorderable
(key:
) => boolean

Whether the item with this key can move. An item it rejects shows no handle and cannot be picked up; one at either end of the collection also bounds the others, so nothing drops beyond it and a keyboard move into it is refused. Every item moves without it.

Returns

FieldTypeDescription
reorderable

The collection's reorder behavior: pass it as List's reorderable prop, with an itemKey on each ListItem. Make it once per collection (with useMemo); one made on every render still works. Its one method, start(key), enters reorder mode for that item from your own UI (a Move item in its context menu, a toolbar button): the focus moves to its handle, as activating it does; a key that cannot move or is not mounted does nothing and warns in development. One object may serve several collections, each reordering on its own; start then uses the one mounted last.

Use with shadcn

Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.

This install URL expires with the draft preview.
bash
npx shadcn@4.19.0 add https://astryx-kiz81u4h4-fbopensource.vercel.app/shadcn/hooks/create-reorderable.json