useDndGridItemState

Read the current item and interaction state.

useDndGridItemState exposes the active item's layout data and interaction state. Use it to show drag/resize UI, badges, or inline controls.

Example


import { useState } from "react";
import { DndGrid, type Layout, useDndGridItemState } from "@dnd-grid/react";
import "@dnd-grid/react/styles.css";

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

function ItemStatus() {
  const { item, state } = useDndGridItemState();
  return (
    <div className={state.dragging ? "dragging" : ""}>
      {item.id} {state.resizing ? "(resizing)" : ""}
    </div>
  );
}

export function ItemStateGrid() {
  const [layout, setLayout] = useState(initialLayout);

  return (
    <DndGrid
      layout={layout}
      onLayoutChange={setLayout}
      cols={12}
      rowHeight={40}
    >
      {layout.map((item) => (
        <div key={item.id}>
          <ItemStatus />
        </div>
      ))}
    </DndGrid>
  );
}

Returns

Value	Description
`item`	The current `LayoutItem`.
`state`	Interaction flags (`dragging`, `resizing`, `settling`, `disabled`).

This hook must be used inside a DndGrid item. For shared components, use useOptionalDndGridItemState and handle the null case.