![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@dnd-kit/sortable
Advanced tools
Package description
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.
Readme
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,161,573 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.