29 lines
1017 B
Markdown
29 lines
1017 B
Markdown
|
# @dnd-kit/sortable
|
||
|
|
|
||
|
|
[](https://npm.im/@dnd-kit/sortable)
|
||
|
|
|
||
|
|
The sortable preset provides the building blocks to build sortable interfaces with @dnd-kit.
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
To get started, install the sortable preset via npm or yarn:
|
||
|
|
|
||
|
|
```
|
||
|
|
npm install @dnd-kit/sortable
|
||
|
|
```
|
||
|
|
|
||
|
|
## Architecture
|
||
|
|
|
||
|
|
The sortable preset builds on top of the primitives exposed by `@dnd-kit/core` to help building sortable interfaces.
|
||
|
|
|
||
|
|
The sortable preset exposes two main concepts: `SortableContext` and the `useSortable` hook:
|
||
|
|
|
||
|
|
- The SortableContext provides information via context that is consumed by the `useSortable` hook.
|
||
|
|
- The useSortable hook is an abstraction that composes the `useDroppable` and `useDraggable` hooks.
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
Visit [docs.dndkit.com](https://docs.dndkit.com/presets/sortable) to learn how to use the Sortable preset.
|