@dnd-kit/core

What is @dnd-kit/core?

The @dnd-kit/core package provides a comprehensive set of tools for building complex drag and drop interfaces with ease. It is designed to be highly customizable and extensible, allowing developers to implement a wide range of drag and drop scenarios, from simple list reordering to complex nested structures and beyond. The core package focuses on providing the fundamental building blocks for drag and drop functionality, leaving UI and styling decisions up to the developer.

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

Basic Drag and Drop

This feature allows for the implementation of basic drag and drop functionality within your application. The DndContext component is used to wrap around the draggable elements, providing the necessary context for drag and drop interactions.

{"import {DndContext} from '@dnd-kit/core';

function App() {
  return (
    <DndContext>
      {/* Your draggable items here */}
    </DndContext>
  );
}"}

Sorting

This feature enables sorting functionality within a list of items. By using the DndContext in combination with sensors and a sorting utility function like arrayMove, developers can easily implement draggable lists where items can be reordered.

{"import {DndContext, useSensor, PointerSensor} from '@dnd-kit/core';
import {arrayMove} from '@dnd-kit/sortable';

function App() {
  const sensors = [useSensor(PointerSensor)];

  const handleDragEnd = (event) => {
    const {active, over} = event;

    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.findIndex((item) => item.id === active.id);
        const newIndex = items.findIndex((item) => item.id === over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }
  };

  return (
    <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
      {/* Your sortable items here */}
    </DndContext>
  );
}"}

Other packages similar to @dnd-kit/core

react-beautiful-dnd

react-beautiful-dnd is a popular drag and drop library for React. It offers a high-level API that focuses on creating beautiful, fluid, and accessible drag and drop lists. Compared to @dnd-kit/core, react-beautiful-dnd is more opinionated in terms of its design and functionality, providing out-of-the-box solutions for list reordering but may not offer the same level of customization and control for more complex scenarios.

react-dnd

react-dnd is a flexible drag and drop library for React, built on top of the HTML5 drag and drop API. It provides a set of hooks and components to build complex drag and drop interfaces. While react-dnd offers a great deal of flexibility and control, it can have a steeper learning curve compared to @dnd-kit/core. react-dnd's reliance on the HTML5 drag and drop API also means it may not be as suited for touch devices without additional work.

README

@dnd-kit/core

@dnd-kit – a lightweight React library for building performant and accessible drag and drop experiences.

Installation

To get started, install the @dnd-kit/core package via npm or yarn:

npm install @dnd-kit/core

Usage

Visit docs.dndkit.com to learn how to get started with @dnd-kit.