Dnd

Code example

import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
import { useState } from "react";

export function Example() {
  const [items, setItems] = useState(["One", "Two", "Three"]);

  return (
    <DragDropContext
      onDragEnd={(result) => {
        if (!result.destination) return;
        const next = [...items];
        const [moved] = next.splice(result.source.index, 1);
        next.splice(result.destination.index, 0, moved);
        setItems(next);
      }}
    >
      <Droppable droppableId="list">
        {(provided) => (
          <ul ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable draggableId={item} index={index} key={item}>
                {(drag) => (
                  <li ref={drag.innerRef} {...drag.draggableProps} {...drag.dragHandleProps}>
                    {item}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
}

Pros & cons

FAQs