API overview

API reference for dnd-grid.

Exports

Common exports:


import {
  DndGrid,
  ResponsiveDndGrid,
  GridItem,
  ResizeHandle,
  useContainerWidth,
  useDndGrid,
  useDndGridResponsiveLayout,
  useDndGridItemState,
  useOptionalDndGridItemState,
  useReducedMotion,
  useEdgeScroll,
  createLayoutEngine,
  verticalCompactor,
  defaultConstraints,
  layoutSchema,

Published with Edda

Component	Description
`DndGrid`	Main grid layout component
`ResponsiveDndGrid`	Breakpoint-aware responsive grid

Hook	Description
`useContainerWidth`	Measure container width with ResizeObserver
`useDndGrid`	Headless hook for building custom grid wrappers
`useDndGridResponsiveLayout`	Manage responsive breakpoints + layout state
`useDndGridItemState`	Access item layout and interaction state
`useEdgeScroll`	Auto-scroll while dragging near scroll edges

Type	Description
`Layout`	Array of layout items (`LayoutItem[]`)
`LayoutItem`	Position and size of a single grid item
`ResponsiveLayouts`	Breakpoint → layout map
`Compactor`	Pluggable compaction strategy
`LayoutConstraint`	Drag/resize constraint definition
`GridDragEvent`	Event object for drag callbacks
`GridResizeEvent`	Event object for resize callbacks

Class	Element
`.dnd-grid`	Grid container
`.dnd-grid-item`	Each grid item
`.dnd-grid-item-content`	Non-placeholder grid items
`.dnd-grid-placeholder`	Placeholder during drag/resize
`.dnd-draggable-dragging`	Item currently being dragged
`.resizing`	Item currently being resized

API overview

Exports

API overview

Exports

Components

Hooks

Types

Additional exports

Runtime validation

CSS classes

Quick reference

Essential props

Import styles