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.
Items use useDndGridItemState() to render state-aware content.
How it works
Grid items often need to know whether they are currently being dragged or resized so they can dim, show a handle, or swap in a live readout. The useDndGridItemState hook gives a child access to its own item and interaction state without threading props down from the grid.
The cells here render their coordinates while dragging and a label the rest of the time. Because the hook reads from context, the component can sit at any depth inside the cell, which keeps the grid free of render-prop plumbing.
Related examples
- 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.
- 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.
- Portal — Render the grid through createPortal into a separate DOM container while keeping drag and resize behaviour intact in this dnd-grid React portal example.