useDndGridItemState

Copyimport { 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>
  );
}