@dnd-kit/react

The React adapter for @dnd-kit — a lightweight, performant, and extensible drag and drop toolkit. Built on top of @dnd-kit/dom.

Installation

npm install @dnd-kit/react

Quick start

import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';

function App() {
  const [parent, setParent] = useState(null);

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;
        setParent(event.operation.target?.id ?? null);
      }}
    >
      {parent == null ? <Draggable /> : null}
      <Droppable>{parent ? <Draggable /> : 'Drop here'}</Droppable>
    </DragDropProvider>
  );
}

Hooks

| Hook | Import | Description | | -------------- | ------------------------- | ---------------------------------- | | useDraggable | @dnd-kit/react | Make an element draggable | | useDroppable | @dnd-kit/react | Create a drop target | | useSortable | @dnd-kit/react/sortable | Combine drag and drop with sorting |

Components

• <DragDropProvider> — Wraps your drag and drop interface, manages sensors, plugins, and events.
• <DragOverlay> — Renders a custom overlay element during drag operations.

Documentation

Visit dndkit.com for full documentation, guides, and interactive examples.