useDndGrid

Headless hook for building custom grid wrappers.

useDndGrid exposes the grid logic without rendering. Use it when you want a custom wrapper, extra markup around the grid, or to control how items render.

DndGrid is the recommended default for most apps. Reach for useDndGrid when you need full control over the markup.

Example

Published with Edda

import * as React from "react";
import { GridItem, type Layout, useDndGrid } from "@dnd-grid/react";
import "@dnd-grid/react/styles.css";

const initialLayout: Layout = [
  { id: "a", x: 0, y: 0, w: 2, h: 2 },
  { id: "b", x: 2, y: 0, w: 2, h: 2 },
];

export function HeadlessGrid() {
  const [layout, setLayout] = React.useState(initialLayout);
  const children = layout.map((item) => (
    <div key={item.id} className="card">
      {item.id.toUpperCase()}
    </div>
  ));

  const { gridProps, itemProps, liveRegionElement } = useDndGrid({
    layout,
    onLayoutChange: setLayout,
    width: 800,
    cols: 12,
    rowHeight: 40,
    children,
  });

  const droppingProps = itemProps.getDroppingItemProps();
  const placeholderProps = itemProps.getPlaceholderProps();

  return (
    <section>
      <div {...gridProps}>
        {liveRegionElement}
        {React.Children.map(children, (child) => {
          const props = itemProps.getItemProps(child);
          return props ? <GridItem {...props} /> : null;
        })}
        {droppingProps && <GridItem {...droppingProps} />}
        {placeholderProps && <GridItem {...placeholderProps} />}
      </div>
    </section>
  );
}

Option	Type	Description
`layout`	`Layout`	Controlled layout array.
`width`	`number`	Required width in pixels.
`children`	`ReactNode`	Items to render; each child `key` must match `layout.id`.
`onLayoutChange`	`(layout) => void`	Called when the layout changes.

Value	Description
`gridProps`	Props to spread onto the grid container, including `ref`, roles, and drop handlers.
`itemProps`	Helpers for items: `getItemProps`, `getDroppingItemProps`, `getPlaceholderProps`.
`state`	Internal grid state (`layout`, `activeDrag`, `resizing`, and more).
`api`	Imperative API (`measure`, `scroll`, `move`, `resize`, `commit`, `containerHeight`).
`liveRegion`	`aria-live` props + current message for announcing drag/resize events.
`liveRegionElement`	Ready-to-render live region element.

useDndGrid

Example

useDndGrid

Example

Options

Returns