@dnd-kit/sortable

What is @dnd-kit/sortable?

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.

What are @dnd-kit/sortable's main functionalities?

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>
  );
}

Other packages similar to @dnd-kit/sortable

react-beautiful-dnd

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

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

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

@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 to learn how to use the Sortable preset.