data/@mihcm/ui·v0.21.0·stable
SortableList
Reorderable list powered by dnd-kit sortable primitives with pointer and keyboard sensors plus a renderItem slot for rich rows.
Props
The full prop API for SortableList. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
items | SortableListItem[] | — | Items with id and optional disabled state. | 0.12.0 |
onItemsChange | (items) => void | — | Called with the reordered item array after drag end. | 0.12.0 |
renderItem | (item, state) => ReactNode | — | Render function for each draggable row. | 0.12.0 |
orientation | 'vertical' | 'horizontal' | 'vertical' | Vertical list or horizontally scrollable list. | 0.12.0 |
itemClassName | string | — | Tokenized Tailwind classes for each item surface. | 0.12.0 |
disabled | boolean | false | Disable all drag interactions. | 0.12.0 |
className | string | — | Additional Tailwind classes on the list wrapper. | 0.12.0 |
Upstream library
This component intentionally keeps the MiHCM API small while preserving the supported upstream behavior listed below. Use these links when you need the full underlying option surface.
- dnd kit documentation — MiHCM wraps pointer and keyboard sensors with a tokenized renderItem slot for rich list rows.
- dnd kit GitHub — Use upstream docs for collision strategies, sensors, accessibility announcements, and advanced sortable behavior.
Import
import { SortableList } from '@mihcm/ui/SortableList';