• Drag + resize: smooth interactions with weighted drag physics and configurable handles.
• Responsive layouts: breakpoint helpers and automatic container width measurement.
• Compaction + constraints: packing strategies, collision handling, and bounds control.
• Edge auto-scroll: keep dragging near scroll boundaries.
• Touch-friendly: configurable touch drag delay.
• Styling defaults + hooks: base.css/theme.css, CSS variables, data attributes, and item state hook.
• Accessible grid: grid semantics plus configurable aria-live announcements.
• Headless core engine: @dnd-grid/core handles layout math with a React adapter on top.
• Layout persistence: add/remove widgets and serialize/restore layouts.

Documentation

To learn how to get started with dnd-grid, visit the official documentation website for API docs, guides, and examples.

Demo

Try the live demo.

Installation

npm install @dnd-grid/react

Add the styles to your global CSS:

@import "@dnd-grid/react/styles.css";

Usage

import { DndGrid, type Layout } from "@dnd-grid/react";

<DndGrid layout={layout} cols={12} rowHeight={50} onLayoutChange={setLayout}>
  {layout.map((item) => (
    <div key={item.id}>{item.id}</div>
  ))}
</DndGrid>;

Acknowledgements

Based on react-grid-layout by Samuel Reed (STRML). Differences: weighted drag physics, better styling defaults (base.css/theme.css, CSS vars, data attributes), touch drag delay, edge auto-scroll, item state hook.

Licence

MIT