By default, a PanelGroup with an autoSaveId will store layout information in localStorage. This example shows how to use the storage prop to override that behavior. For this demo, layout is saved as part of the URL hash.
Note the storage API is synchronous. If an async source is used (e.g. a database) then values should be pre-fetched during the initial render (e.g. using Suspense).
Note calls to storage.setItem are debounced by 100ms. Depending on your implementation, you may wish to use a larger interval than that.
1 const navigate = useNavigate();
2
3 const urlStorage = useMemo(() => ({
4 getItem(name) {
5 try {
6 const parsed = JSON.parse(decodeURI(window.location.hash.substring(1)));
7 return parsed[name] || "";
8 } catch (error) {
9 console.error(error);
10 return "";
11 }
12 },
13 setItem(name, value) {
14 const encoded = encodeURI(JSON.stringify({
15 [name]: value
16 }));
17
18 // Update the hash without interfering with the browser's Back button.
19 navigate('#' + encoded, { replace: true });
20 }
21 }), [navigate]);
22
23 <PanelGroup autoSaveId="example" direction="horizontal" storage={urlStorage}>
24 <Panel>left</Panel>
25 <PanelResizeHandle />
26 <Panel>middle</Panel>
27 <PanelResizeHandle />
28 <Panel>right</Panel>
29 </PanelGroup>