Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions apps/docs/react/hooks/use-sortable.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,52 @@ export default function App() {
'styles.css': {code: sortableStyles, hidden: true},
}} height={455} previewHeight={180} />

### Get state of reordered items

To get the state of your array of sortable items after a reorder, first install the `@dnd-kit/helpers` package:

<CodeGroup>
```plain npm
npm install @dnd-kit/helpers
```

```plain yarn
yarn install @dnd-kit/helpers
```

```plain pnpm
pnpm install @dnd-kit/helpers
```

```plain bun
bun install @dnd-kit/helpers
```
</CodeGroup>

Next, use the `move` helper function in either `onDragEnd` or `onDragOver` events to update the state of the array:

```jsx
import { move } from '@dnd-kit/helpers';

function SortableDemo() {
const [items, setItems] = useState([1, 2, 3, 4]);

useEffect(() => {
console.log(items); // print out the reordered array
}, [items]);

return (
<DragDropProvider onDragEnd={(event) => setItems(move(items, event))}>
<ul>
{items.map((id, index) => (
<Sortable key={id} id={id} index={index} />
))}
</ul>
</DragDropProvider>
);
}
```

## API Reference

<Note>
Expand Down