Composition

1"use client";
2 
3import { DndGrid, type Layout, useDndGridItemState } from "@dnd-grid/react";
4import { useState } from "react";
5 
6const initialLayout: Layout = [
7  { id: "c1", x: 0, y: 0, w: 3, h: 2 },
8  { id: "c2", x: 3, y: 0, w: 3, h: 2 },
9  { id: "c3", x: 6, y: 0, w: 3, h: 2 },
10  { id: "c4", x: 9, y: 0, w: 3, h: 2 },
11];
12 
13function StateAwareContent() {
14  const { item, state } = useDndGridItemState();
15  let label = item.id;
16  if (state.dragging) {
17    label = "Dragging";
18  } else if (state.resizing) {
19    label = "Resizing";
20  }
21 
22  return (
23    <div className="grid-item">
24      <span>{label}</span>
25      {state.dragging && (
26        <span className="block text-xs text-zinc-500">
27          {item.x},{item.y}
28        </span>
29      )}
30    </div>
31  );
32}
33 
34export function CompositionExample() {
35  const [layout, setLayout] = useState<Layout>(initialLayout);
36 
37  return (
38    <div className="space-y-4">
39      <div className="text-xs text-zinc-500">
40        Items use useDndGridItemState() to render state-aware content.
41      </div>
42      <DndGrid
43        cols={12}
44        layout={layout}
45        onLayoutChange={setLayout}
46        rowHeight={50}
47      >
48        {layout.map((item) => (
49          <StateAwareContent key={item.id} />
50        ))}
51      </DndGrid>
52    </div>
53  );
54}