Headless wrapper

1"use client";
2 
3import {
4  GridItem,
5  type Layout,
6  useContainerWidth,
7  useDndGrid,
8} from "@dnd-grid/react";
9import { Children, type MutableRefObject, useCallback, useState } from "react";
10 
11const initialLayout: Layout = [
12  { id: "a", x: 0, y: 0, w: 3, h: 2 },
13  { id: "b", x: 3, y: 0, w: 3, h: 2 },
14  { id: "c", x: 6, y: 0, w: 3, h: 2 },
15];
16 
17export function HeadlessExample() {
18  const [layout, setLayout] = useState(initialLayout);
19  const { width, containerRef, mounted } = useContainerWidth({
20    measureBeforeMount: true,
21  });
22  const children = layout.map((item) => (
23    <div className="grid-item" key={item.id}>
24      {item.id}
25    </div>
26  ));
27 
28  const { gridProps, itemProps, liveRegionElement } = useDndGrid({
29    layout,
30    onLayoutChange: setLayout,
31    cols: 12,
32    rowHeight: 50,
33    width,
34    children,
35  });
36 
37  const { ref: gridRef, ...restGridProps } = gridProps;
38  const setGridRef = useCallback(
39    (node: HTMLDivElement | null) => {
40      containerRef.current = node;
41      if (typeof gridRef === "function") {
42        gridRef(node);
43        return;
44      }
45      if (gridRef) {
46        (gridRef as MutableRefObject<HTMLDivElement | null>).current = node;
47      }
48    },
49    [containerRef, gridRef]
50  );
51 
52  const droppingProps = itemProps.getDroppingItemProps();
53  const placeholderProps = itemProps.getPlaceholderProps();
54 
55  return (
56    <div className="space-y-2">
57      <div className="text-xs text-zinc-500">Custom wrapper</div>
58      <div {...restGridProps} ref={setGridRef}>
59        {mounted && (
60          <>
61            {liveRegionElement}
62            {Children.map(children, (child) => {
63              const props = itemProps.getItemProps(child);
64              return props ? <GridItem {...props} /> : null;
65            })}
66            {droppingProps && <GridItem {...droppingProps} />}
67            {placeholderProps && <GridItem {...placeholderProps} />}
68          </>
69        )}
70      </div>
71    </div>
72  );
73}