useDndGridResponsiveLayout

Manage responsive layouts and breakpoint state.

useDndGridResponsiveLayout keeps a layout per breakpoint, generates missing layouts, and returns ready-to-spread props for DndGrid. Use ResponsiveDndGrid for the default responsive component.

Example


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

Published with Edda

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

useDndGridResponsiveLayout

Example

Options

Returns