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": "^1.0.0"
+   "@dnd-kit/helpers": "^1.0.0"
  }

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