useDndGrid


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.

Example

Options

Returns