@rozie-ui/sortable-list-react

Idiomatic react SortableList — a cross-framework drag-and-drop list compiled from one Rozie source via SortableJS. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/sortable-list-react

Peer dependencies: sortablejs ^1.15 + react + react-dom. Install them alongside this package.

Usage

import { useState } from 'react';
import { SortableList } from '@rozie-ui/sortable-list-react';

export function Demo() {
  const [items, setItems] = useState([
    { id: '1', label: 'Apple' },
    { id: '2', label: 'Banana' },
  ]);
  return (
    <SortableList items={items} onItemsChange={setItems} itemKey="id">
      {({ item }) => <span>{item.label}</span>}
    </SortableList>
  );
}

Props

| Name | Type | Default | Two-way (model) | Required | | --- | --- | --- | :---: | :---: | | items | Array | [] | ✓ | | | itemKey | String \| Function | null | | | | handle | String | null | | | | group | String | null | | | | animation | Number | 150 | | | | disabled | Boolean | false | | | | disableKeyboard | Boolean | false | | | | options | Object | {} | | | | labelFor | Function | null | | | | ghostClass | String | null | | | | chosenClass | String | null | | | | dragClass | String | null | | | | filter | String | null | | | | easing | String | null | | | | forceFallback | Boolean | false | | | | swapThreshold | Number | 1 | | | | cloneable | Boolean | false | | | | listClass | String \| Array \| Object | "" | | | | itemClass | String \| Array \| Object \| Function | "" | | | | itemStyle | String \| Object \| Function | null | | |

Events

| Event | Description | | --- | --- | | change | Fired after the list order changes (same-list reorder commit). | | add | Fired when an item is added from another list (cross-list destination commit). | | remove | Fired when an item is moved out to another list (cross-list source commit; not fired in clone mode). | | start | Fired when dragging starts. | | end | Fired when dragging ends (source side). |

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

| Method | Description | | --- | --- | | getInstance | Return the underlying SortableJS instance for direct API access (the raw-engine escape hatch — save, closest, etc. are one hop away). null before mount and after destroy. | | toArray | Return the current order as an array of data-id strings (each row carries data-id="<key>"). [] before mount. | | sort | Reorder the list by an array of data-id strings — sort(order, useAnimation = true). | | option | Read or set a live SortableJS option — option(name) gets, option(name, value) sets. The runtime escape hatch for options beyond the curated props. |

import { useRef } from 'react';
import { SortableList, type SortableListHandle } from '@rozie-ui/sortable-list-react';

const sl = useRef<SortableListHandle>(null);
// <SortableList ref={sl} ... />
const order = sl.current?.toArray();
sl.current?.option('disabled', true);

Slots

| Slot | Params | | --- | --- | | header | | | (default) | item, index | | footer | |