AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
useDndGridItemState
Read the current item and interaction state.
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>
);
}| 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.