Responsive layouts

<ResponsiveGridLayout> switches column count and layout as the container width crosses breakpoints. Give it a map of per-breakpoint layouts; missing breakpoints are generated from the nearest provided one.


import { ResponsiveGridLayout, useContainerWidth, type ResponsiveLayouts } from "@snapgridjs/react";
 
const [layouts, setLayouts] = useState<ResponsiveLayouts>({
  lg: [
    { i: "a", x: 0, y: 0, w: 4, h: 2 },
    { i: "b", x: 4, y: 0, w: 4, h: 2 },
    { i: "c", x: 8, y: 0, w: 4, h: 2 },
  ],
});
 
const { width, containerRef } = useContainerWidth();
 
<div ref={containerRef}>
  <ResponsiveGridLayout
    width={width}
    layouts={layouts}
    onLayoutChange={(_layout, allLayouts) => setLayouts(allLayouts)}
    onBreakpointChange={(bp, cols) => console.log("now at", bp, cols)}
  >
    {["a", "b", "c"].map((id) => (
      <div key={id} className="tile">{id}</div>
    ))}
  </ResponsiveGridLayout>
</div>;

Responsive

12 columns · 560px — drag the right edge to resize

Breakpoints & columns

Defaults mirror react-grid-layout:

Breakpoint	Min width (px)	Columns
`lg`	1200	12
`md`	996	10
`sm`	768	6
`xs`	480	4
`xxs`	0	2

Override either with the breakpoints and cols props (exported as DEFAULT_BREAKPOINTS and DEFAULT_BREAKPOINT_COLS if you want to extend them).


<ResponsiveGridLayout
  breakpoints={{ lg: 1280, md: 900, sm: 0 }}
  cols={{ lg: 16, md: 8, sm: 4 }}
  /* … */
/>

`onLayoutChange` gives you both

The callback is (activeLayout, allLayouts): the layout for the current breakpoint and the full updated map. Store the map so edits at one breakpoint don’t clobber the others:


onLayoutChange={(_active, all) => setLayouts(all)}

Prefer the hook? useResponsiveLayout(...) is the headless engine behind the component. It resolves the active breakpoint, column count, and layout, and returns an onLayoutChange that updates the right breakpoint. See Hooks.

Responsive layouts

Breakpoints & columns

onLayoutChange gives you both

`onLayoutChange` gives you both