React Super DnD

React Super DnD is a lightweight, flexible, and accessible drag-and-drop component library for React.
It enables you to build sortable lists, kanban boards, and custom drag-and-drop UIs with minimal setup and maximum control.
Designed for modern React apps, it supports vertical/horizontal lists, cross-list movement, and smooth animations.

Use Case

• Sortable lists (vertical/horizontal)
• Kanban boards (move cards between columns)
• Custom drag-and-drop UIs with full control over rendering and state

Installation and usage

import React, { useState } from "react";
import {DragDropContext, Droppable, Draggable} from "SuperDnd";

const initialItems = [
  { id: "item-1", content: "First Item" },
  { id: "item-2", content: "Second Item" },
  { id: "item-3", content: "Third Item" },
];

function Example() {
  const [items, setItems] = useState(initialItems);

  const onDragEnd = ({ source, destination }) => {
    if (!destination) return;
    const updated = [...items];
    const [removed] = updated.splice(source.index, 1);
    updated.splice(destination.index, 0, removed);
    setItems(updated);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable-1">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, idx) => (
              <Draggable key={item.id} draggableId={item.id} index={idx}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      ...provided.draggableProps.style,
                      padding: 8,
                      marginBottom: "4px",
                      background: "#eee",
                      borderRadius: 4,
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

Props Reference

DragDropContext

| Prop Name | Required/Optional | Input Type | Info | |-------------------------|-------------------|--------------------|--------------------------------------------------------------------------------------| | children | required | ReactNode | Components that will have access to drag-and-drop context. | | onDragEnd | optional | function | Callback when drag ends. Receives { source, destination, draggedItem }. | | onDragStart | optional | function | Callback when drag starts. Receives { draggableId, source, data }. | | scrollableRef | optional | ref | Ref to scrollable container for auto-scroll during drag. | | scrollThreshold | optional | number | Distance from edge to trigger auto-scroll (default: 50). | | scrollSpeed | optional | number | Speed of auto-scroll (default: 5). | | animationDuration | optional | string | CSS duration for drag/drop animations (default: "200ms"). | | animationTimingFunction | optional | string | CSS timing function for animations (default: "cubic-bezier(0.2, 0, 0, 1)"). |

Droppable

| Prop Name | Required/Optional | Input Type | Info | |----------------|-------------------|----------------------------|--------------------------------------------------------------------------------------| | droppableId | required | string | Unique identifier for this droppable area. | | children | required | function | Render prop: (provided, snapshot) => ReactNode. | | direction | optional | "vertical" | "horizontal" | Layout direction for contained draggables (default: "vertical"). | | isDropDisabled | optional | boolean | If true, disables dropping into this droppable. |

Draggable

| Prop Name | Required/Optional | Input Type | Info | |------------------|-------------------|--------------|--------------------------------------------------------------------------------------| | draggableId | required | string | Unique identifier for this draggable item. | | index | required | number | Position of this item in the list. | | children | required | function | Render prop: (provided, snapshot) => ReactNode. | | data | optional | object | Custom data associated with the draggable item, returned in the onDragEnd callback result. | | isDragDisabled | optional | boolean | If true, disables dragging for this item. |