Persistent Layouts
Examples of persisting layouts across page loads.
Local Storage
The PaneGroup
component has an autoSaveId
prop that can be used to uniquely identify the layout of the panes within the group. When provided, the layout of the panes will be saved to local storage and restored when the page is reloaded.
Left
Right
Anatomy
Here's the high-level structure of the example above:
Cookies (SSR-friendly)
Local storage is not available on the server, so you can use cookies to persist the layout of the panes across page loads, ensuring no layout flicker when the page is first loaded.
Left
Right
Anatomy
Here's the high-level structure of the example above: