List reordering

Pass React Aria drag and drop hooks to let people reorder items by mouse, touch or keyboard.

List
ListItem

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, List reordering

Atlas

Beacon notifications service, with a deliberately long name to show wrapping

Comet

Dark theme, List reordering

Atlas

Beacon notifications service, with a deliberately long name to show wrapping

Comet

High contrast theme, List reordering

Atlas

Beacon notifications service, with a deliberately long name to show wrapping

Comet

UsageLink to the section Usage

tsx

import { List, ListItem } from '@skribly/ui/data'

tsx

const { dragAndDropHooks } = useDragAndDrop({ getItems, onReorder, renderDropIndicator })
<List aria-label="Release order" items={list.items} dragAndDropHooks={dragAndDropHooks}>
  {(item) => <ListItem id={item.id} title={item.name} />}
</List>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Each item gets a drag handle with a 24px target.
From the keyboard, focus the handle and press Enter to pick the item up, move with the arrow keys and press Enter to drop; React Aria announces each step, and Escape cancels.

This demo runs through axe in all three themes on every test run. See what the tests check.