Local storage
Persist the grid layout to local storage and restore it on reload so user arrangements survive page refreshes in this dnd-grid React persistence example.
How it works
Because the grid is controlled, persistence is entirely yours to arrange: serialise the layout you receive from onLayoutChange and hydrate from storage on mount. This example reads and writes localStorage so an arrangement survives a reload.
The one thing to watch is hydration. Reading storage during the first render diverges from what the server produced, so the read happens in an effect and the stored layout is applied afterwards. The SSR guide covers the same problem in more detail.
Related examples
- 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.
- Dynamic add/remove — Add and remove grid items at runtime and watch the layout compact and reflow automatically in this dynamic add and remove dnd-grid React grid example.
- 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.
- Multiple instances — Run two independent dnd-grid instances on a single page, each with its own draggable and resizable layout state, in this multiple-instances React example.