@dnd-kit/sortable
Advanced tools
The sortable preset provides the building blocks to build sortable interfaces with @dnd-kit.
To get started, install the sortable preset via npm or yarn:
npm install @dnd-kit/sortable
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:
useSortable hook.useDroppable and useDraggable hooks.
Visit docs.dndkit.com to learn how to use the Sortable preset.
React Beautiful DnD is a popular drag-and-drop library for React that provides a powerful and natural API for building complex drag-and-drop interfaces. It is similar to @dnd-kit/sortable in that it allows for the creation of sortable lists and grids, but it has a different API design and focuses on providing a beautiful and fluid drag-and-drop experience with a strong emphasis on accessibility.
React Sortable HOC is a set of higher-order components to turn any list into an animated, touch-friendly, sortable list. It is similar to @dnd-kit/sortable in providing sortable capabilities, but it uses the higher-order component pattern instead of hooks and context, which might be more familiar to developers with experience in older React patterns.
React DnD is a drag-and-drop library for React, built on top of the HTML5 drag-and-drop API. It is more low-level compared to @dnd-kit/sortable and gives developers more control over the drag-and-drop mechanics. It is suitable for more complex use cases where developers need direct access to the HTML5 drag-and-drop API.
FAQs
Official sortable preset and sensors for dnd kit
The npm package @dnd-kit/sortable receives a total of 8,943,630 weekly downloads. As such, @dnd-kit/sortable popularity was classified as popular.
We found that @dnd-kit/sortable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.
Security News
/Research
Widespread GitHub phishing campaign uses fake Visual Studio Code security alerts in Discussions to trick developers into visiting malicious website.