dnd-grid

A drag-and-drop, resizable grid layout for React

npm install @dnd-grid/react

Add block

Text

Headline with supporting body copy.

Media

Image-first block with a caption.

Quote

Pull quote with attribution.

Installation

npm install @dnd-grid/react

Add 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>