React Cheatsheet 17 — Drag and Drop

npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core";

function Draggable({ id, children }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({ id });
  const style = transform ? { transform: `translate(${transform.x}px, ${transform.y}px)` } : undefined;
  
  return (
    <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
      {children}
    </div>
  );
}

function Droppable({ id, children }) {
  const { isOver, setNodeRef } = useDroppable({ id });
  return (
    <div ref={setNodeRef} style={{ background: isOver ? "lightgreen" : "white" }}>
      {children}
    </div>
  );
}

function App() {
  return (
    <DndContext onDragEnd={(e) => console.log(e.over?.id, e.active.id)}>
      <Draggable id="card">Card</Draggable>
      <Droppable id="zone">Drop here</Droppable>
    </DndContext>
  );
}

import {
  arrayMove, SortableContext, useSortable, verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

function SortableItem({ id, children }) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
  const style = { transform: CSS.Transform.toString(transform), transition };
  return (
    <li ref={setNodeRef} style={style} {...attributes} {...listeners}>
      {children}
    </li>
  );
}

function List() {
  const [items, setItems] = useState(["a", "b", "c"]);
  
  function onDragEnd(e) {
    const { active, over } = e;
    if (!over || active.id === over.id) return;
    setItems((arr) => {
      const oldIdx = arr.indexOf(active.id);
      const newIdx = arr.indexOf(over.id);
      return arrayMove(arr, oldIdx, newIdx);
    });
  }
  
  return (
    <DndContext onDragEnd={onDragEnd}>
      <SortableContext items={items} strategy={verticalListSortingStrategy}>
        <ul>
          {items.map((i) => <SortableItem key={i} id={i}>{i}</SortableItem>)}
        </ul>
      </SortableContext>
    </DndContext>
  );
}

import { useSensor, useSensors, PointerSensor, KeyboardSensor } from "@dnd-kit/core";

const sensors = useSensors(
  useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
  useSensor(KeyboardSensor),
);

<DndContext sensors={sensors} ...>

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

const [active, setActive] = useState(null);

<DndContext
  onDragStart={(e) => setActive(e.active.id)}
  onDragEnd={() => setActive(null)}
>
  <List />
  <DragOverlay>
    {active && <Card>{active}</Card>}
  </DragOverlay>
</DndContext>

function onDragEnd(e) {
  const { active, over } = e;
  if (!over) return;
  
  const fromCol = findColumn(active.id);
  const toCol = findColumn(over.id);
  
  if (fromCol === toCol) {
    // reorder within column
    setColumns({ ...columns, [fromCol]: arrayMove(...) });
  } else {
    // move between columns
    setColumns({
      ...columns,
      [fromCol]: columns[fromCol].filter(...),
      [toCol]: [...columns[toCol], active.id],
    });
  }
}

<DndContext
  accessibility={{
    announcements: {
      onDragStart: ({ active }) => `Picked up ${active.id}`,
      onDragEnd: ({ active, over }) => over ? `Dropped on ${over.id}` : "Cancelled",
    },
  }}
>

<div
  draggable
  onDragStart={(e) => e.dataTransfer.setData("text/plain", id)}
/>

<div
  onDragOver={(e) => e.preventDefault()}
  onDrop={(e) => {
    const id = e.dataTransfer.getData("text/plain");
    handleDrop(id);
  }}
/>

function Dropzone() {
  function onDrop(e: React.DragEvent) {
    e.preventDefault();
    const files = Array.from(e.dataTransfer.files);
    uploadFiles(files);
  }
  
  return (
    <div onDragOver={(e) => e.preventDefault()} onDrop={onDrop}>
      Drop files here
    </div>
  );
}

npm i react-dropzone

import { useDropzone } from "react-dropzone";

function Dropzone() {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop: (accepted) => upload(accepted),
    accept: { "image/*": [] },
    maxSize: 10 * 1024 * 1024,
  });
  
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? "Drop!" : "Drag here"}
    </div>
  );
}