useDndGridResponsiveLayout

useDndGridResponsiveLayout · dnd-grid


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

Option	Type	Description
`width`	`number`	Required. Container width in pixels.
`breakpoints`	`Record<Breakpoint, number>`	Breakpoint map, defaults to `lg`, `md`, `sm`, `xs`, `xxs`.
`cols`	`Record<Breakpoint, number>`	Column count per breakpoint.
`layouts`	`ResponsiveLayouts`	Controlled layouts per breakpoint.
`defaultLayouts`	`ResponsiveLayouts`	Uncontrolled initial layouts.
`gap`	`ResponsiveSpacing`	Gap per breakpoint (number or spacing object).
`containerPadding`	`ResponsiveSpacing	null`
`compactor`	`Compactor`	Compaction strategy for generated layouts.
`missingLayoutStrategy`	`"derive" \| "warn" \| "error" \| "empty"`	Control how missing breakpoint layouts are handled.
`onBreakpointChange`	`(bp, cols) => void`	Fires when the active breakpoint changes.
`onLayoutsChange`	`(layouts) => void`	Fires when any breakpoint layout changes.
`onLayoutChange`	`(layout, layouts) => void`	Fires when the active layout changes.
`onWidthChange`	`(width, gap, cols, padding) => void`	Fires on width or breakpoint config changes.

Value	Description
`layout`	Layout for the active breakpoint.
`layouts`	Full breakpoint layout map.
`breakpoint`	Current breakpoint key.
`cols`	Column count for the current breakpoint.
`gap`	Resolved gap for the current breakpoint.
`containerPadding`	Resolved container padding for the current breakpoint.
`gridProps`	`{ layout, cols, gap, containerPadding }` to spread onto `DndGrid`.
`setLayoutForBreakpoint`	Update a specific breakpoint layout.
`setLayouts`	Replace all layouts.
`handleLayoutChange`	Helper for `DndGrid`'s `onLayoutChange`.
`sortedBreakpoints`	Breakpoints sorted smallest to largest.

useDndGridResponsiveLayout

Example

Options

Returns