Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@dnd-kit/sortable
Advanced tools
Official sortable preset and sensors for dnd kit
The @dnd-kit/sortable package is a part of the DND Kit ecosystem that provides a set of utilities for building complex drag-and-drop interfaces with sortable capabilities. It allows developers to create sortable lists and grids that are accessible and can be customized to fit the needs of various applications.
Sortable Lists
This feature allows developers to create vertical lists that can be sorted using drag-and-drop. The code sample demonstrates how to set up a DndContext with sensors for pointer and keyboard interactions, and a SortableContext to manage the sortable items.
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
function SortableList({ items }) {
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor)
);
return (
<DndContext sensors={sensors} collisionDetection={closestCenter}>
<SortableContext items={items} strategy={verticalListSortingStrategy}>
{items.map((id) => (
<SortableItem key={id} id={id} />
))}
</SortableContext>
</DndContext>
);
}
Sortable Grids
This feature enables the creation of sortable grids. The code sample shows how to use a DndContext with a MouseSensor and a SortableContext with a rectSortingStrategy to manage the layout of sortable items in a grid format.
import { DndContext, MouseSensor, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
function SortableGrid({ items }) {
const sensors = useSensors(useSensor(MouseSensor));
return (
<DndContext sensors={sensors}>
<SortableContext items={items} strategy={rectSortingStrategy}>
{items.map((id) => (
<SortableItem key={id} id={id} />
))}
</SortableContext>
</DndContext>
);
}
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.
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.
FAQs
Official sortable preset and sensors for dnd kit
The npm package @dnd-kit/sortable receives a total of 1,332,043 weekly downloads. As such, @dnd-kit/sortable popularity was classified as popular.
We found that @dnd-kit/sortable demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.