Headless wrapper
Build a fully custom grid wrapper with the headless useDndGrid hook while dnd-grid handles drag, resize, and layout maths under the hood in React.
Custom wrapper
How it works
useDndGrid exposes the layout engine without any of the rendering. You get the computed positions and the drag and resize handlers, and you decide what the container and cells actually are — useful when the grid has to be a list, a table, or a custom element.
This example pairs it with useContainerWidth to measure the available space, then positions plain divs itself. Everything the DndGrid component does is built on this hook, so nothing is lost by dropping down a level.
Related examples
- Composition — Items read their own drag and resize state with useDndGridItemState to render state-aware content inside each cell in this dnd-grid React composition example.
- Kitchen sink — A full-featured layout builder with external drag, multi-select, an action bar, and an edit panel, showing everything dnd-grid can do in one React example.
- Basic example — A simple draggable and resizable grid layout for React showing the core dnd-grid setup with movable, resizable items and live layout change handling.
- Responsive layout — Define breakpoint-specific layouts that adapt to the container width so the grid reflows responsively across screen sizes in this dnd-grid React example.