dnd-grid
A drag-and-drop, resizable grid layout for React
npm install @dnd-grid/reactAdd block
Text
Headline with supporting body copy.
Media
Image-first block with a caption.
Quote
Pull quote with attribution.
Installation
npm install @dnd-grid/reactAdd the styles to your global CSS file (e.g. globals.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>Examples
- Allow overlapLet grid items stack on top of each other without collision, so cards can overlap freely while you drag and resize them in this dnd-grid React example.
- Aspect ratio constraintsLock item resizing to a fixed aspect ratio so cards keep their proportions while you drag the resize handles in this dnd-grid React layout example.
- Basic exampleA simple draggable and resizable grid layout for React showing the core dnd-grid setup with movable, resizable items and live layout change handling.
- BoundedKeep grid items inside the grid bounds so they cannot be dragged or resized outside the container in this bounded dnd-grid React layout example.
- Compactor showcaseSwitch between vertical, horizontal, and no compaction to see how dnd-grid repositions items and fills empty space as you drag them around the grid.
- CompositionItems read their own drag and resize state with useDndGridItemState to render state-aware content inside each cell in this dnd-grid React composition example.
- ConstraintsPlug in custom constraints and rules to control where items can move and how far they can resize in this constraint-driven dnd-grid React layout example.
- Drag from outsideDrag external items from a palette and drop them into the grid to create new blocks on the fly in this drag-from-outside dnd-grid React example.
- Dynamic add/removeAdd and remove grid items at runtime and watch the layout compact and reflow automatically in this dynamic add and remove dnd-grid React grid example.
- Headless wrapperBuild a fully custom grid wrapper with the headless useDndGrid hook while dnd-grid handles drag, resize, and layout maths under the hood in React.
- Kitchen sinkA full-featured layout builder with external drag, multi-select, an action bar, and an edit panel, showing everything dnd-grid can do in one React example.
- Local storagePersist the grid layout to local storage and restore it on reload so user arrangements survive page refreshes in this dnd-grid React persistence example.
- Multiple instancesRun two independent dnd-grid instances on a single page, each with its own draggable and resizable layout state, in this multiple-instances React example.
- PortalRender the grid through createPortal into a separate DOM container while keeping drag and resize behaviour intact in this dnd-grid React portal example.
- Resizable handlesResize grid items from all eight edges and corners using the built-in resize handles in this resizable-handles dnd-grid React layout example.
- Responsive layoutDefine breakpoint-specific layouts that adapt to the container width so the grid reflows responsively across screen sizes in this dnd-grid React example.
- ScaleKeep drag and resize maths correct when the grid is visually scaled with CSS transforms in this scale-aware dnd-grid React grid layout example.
- Static itemsMark items as static so they cannot be moved or resized while other items drag and reflow around them in this static-items dnd-grid React example.
- ToolboxMove items between the grid and a separate toolbox panel, dragging blocks in and out of an off-grid tray in this toolbox dnd-grid React example.