Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
29 lines
1017 B
Plaintext
29 lines
1017 B
Plaintext
# @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.
|