useDndGridResponsiveLayout

Copyimport {
  DndGrid,
  type Layout,
  useContainerWidth,
  useDndGridResponsiveLayout,
} from "@dnd-grid/react";
import "@dnd-grid/react/styles.css";

const layouts: Record<string, Layout> = {
  lg: [
    { id: "a", x: 0, y: 0, w: 4, h: 2 },
    { id: "b", x: 4, y: 0, w: 4, h: 2 },
  ],
  md: [
    { id: "a", x: 0, y: 0, w: 6, h: 2 },
    { id: "b", x: 0, y: 2, w: 6, h: 2 },
  ],
};

export function ResponsiveGrid() {
  const { width, containerRef, mounted } = useContainerWidth({
    measureBeforeMount: true,
  });

  const { gridProps, handleLayoutChange, breakpoint } =
    useDndGridResponsiveLayout({
      width,
      layouts,
      gap: { lg: 16, md: 12 },
      containerPadding: 16,
    });

  return (
    <div ref={containerRef}>
      <p>Breakpoint: {breakpoint}</p>
      {mounted && (
        <DndGrid
          width={width}
          {...gridProps}
          onLayoutChange={handleLayoutChange}
        >
          <div key="a">A</div>
          <div key="b">B</div>
        </DndGrid>
      )}
    </div>
  );
}