1

Update dependencies

Update your package.json and install the new packages:

  "dependencies": {
-   "@dnd-kit/core": "^x.x.x"
-   "@dnd-kit/sortable": "^x.x.x"
-   "@dnd-kit/utilities": "^x.x.x"
+   "@dnd-kit/react": "^x.x.x"
+   "@dnd-kit/helpers": "^x.x.x"
  }

After updating your package.json, install the new dependencies with your package manager of choice.

2

Migrate context provider

Update your context provider. The new DragDropProvider replaces the legacy DndContext:

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

function App() {
  return (
    <DndContext
      onDragStart={({active}) => {
        console.log(`Started dragging ${active.id}`);
      }}
      onDragEnd={({active, over}) => {
        if (over) {
          console.log(`Dropped ${active.id} over ${over.id}`);
        }
      }}
      onDragCancel={({active}) => {
        console.log(`Cancelled dragging ${active.id}`);
      }}
    >
      <YourComponents />
    </DndContext>
  );
}

The new provider gives you access to the manager instance in event handlers, enabling more advanced control over the drag and drop system.

3

Update draggable components

Update your draggable components using the new useDraggable hook:

function DraggableItem({id}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform
  } = useDraggable({
    id
  });

  return (
    <div
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      style={{
        transform: CSS.Transform.toString(transform)
      }}
    >
      Item {id}
    </div>
  );
}
4

Update droppable components

Update your droppable components using the new useDroppable hook:

function Dropzone() {
  const {setNodeRef, isOver} = useDroppable({
    id: 'drop-zone'
  });

  return (
    <div
      ref={setNodeRef}
      style={{
        background: isOver ? 'lightblue' : 'white'
      }}
    >
      Drop here
    </div>
  );
}
5

Update drag overlay

The DragOverlay component has been simplified:

function App() {
  const [activeId, setActiveId] = useState(null);

  return (
    <DndContext
      onDragStart={() => setActiveId('item')}
      onDragEnd={() => setActiveId(null)}
    >
      <Draggable id="item" />
      <DragOverlay>
        {activeId ? <Item id={activeId} /> : null}
      </DragOverlay>
    </DndContext>
  );
}

Only render the DragOverlay component once per DragDropProvider. The hooks have no effect when used within the overlay.

6

Migrate sortable components

Update your sortable components using the new useSortable hook:

import {useSortable} from '@dnd-kit/sortable';

function SortableItem({id, index}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition
  } = useSortable({
    id,
    index
  });

  return (
    <div
      ref={setNodeRef}
      {...attributes}
      {...listeners}
      style={{
        transform: CSS.Transform.toString(transform),
        transition
      }}
    >
      Item {id}
    </div>
  );
}

Use the array manipulation helpers from @dnd-kit/helpers to handle reordering.

​
Next steps

Quickstart guide

Build beautiful drag and drop interfaces in minutes with the new dnd kit

Draggable elements

Learn how to make elements draggable with the new API

Droppable targets

Create drop zones and handle collision detection

Sortable lists

Build sortable interfaces with array manipulation helpers

Suggest edits