https://github.com/mblode/dnd-grid
A draggable and resizable grid layout for React.
https://github.com/mblode/dnd-grid
Last synced: 4 months ago
JSON representation
A draggable and resizable grid layout for React.
- Host: GitHub
- URL: https://github.com/mblode/dnd-grid
- Owner: mblode
- License: mit
- Created: 2025-12-19T19:12:00.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-01-02T22:13:24.000Z (5 months ago)
- Last Synced: 2026-01-09T10:56:20.693Z (5 months ago)
- Language: TypeScript
- Homepage: https://dnd-grid.com
- Size: 2.32 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
- **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
```bash
npm install @dnd-grid/react
```
Add the styles to your global CSS:
```css
@import "@dnd-grid/react/styles.css";
```
## Usage
```tsx
import { DndGrid, type Layout } from "@dnd-grid/react";
{layout.map((item) => (
{item.id}
))}
;
```
## Acknowledgements
Based on [react-grid-layout](https://github.com/react-grid-layout/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](LICENSE.md)