Import version 3 saved layouts in version 4

[bvaughn]

Consider the following groups with conditionally rendered panels.

Versions 2 or 3

<PanelGroup autoSaveId="group-id" direction="horizontal">
  <Panel id="left">left</Panel>
  {show && (
    <>
      <PanelResizeHandle />
      <Panel id="center">middle</Panel>
    </>
  )}
  <PanelResizeHandle />
  <Panel id="right">right</Panel>
</PanelGroup>

Versions 2 and 3 of this library will save group layouts to a single localStorage entry:

key	value
react-resizable-panels:group-id	{ "left,right": { "expandToSizes": {}, "layout": [50, 50] }, "center,left,right": { "expandToSizes": {}, "layout": [33.3, 33.3, 33.3] } }

Version 4

const { defaultLayout, onLayoutChanged } = useDefaultLayout({
  id: "group-id",
  panelIds,
  storage: localStorage
});

<Group
  defaultLayout={defaultLayout}
  panelIds={panelIds}
  onLayoutChanged={onLayoutChanged}
>
  <Panel id="left" minSize={50}>
    left
  </Panel>
  <Separator />
  {show && (
    <>
      <Panel id="center" minSize={50}>
        center
      </Panel>
      <Separator />
    </>
  )}
  <Panel id="right" minSize={50}>
    right
  </Panel>
</Group>

Version 4 will save layouts separately for each combination of panel ids (if panel ids were explicitly passed to the useDefaultLayoutHook).

Panel ids?	key	value
left+right	react-resizable-panels:group-id:left:right	{ "left": 50, "right": 50 }
left+center+right	react-resizable-panels:group-id:left:center:right	{ "left": 33.3, "center": 33.3, "right": 33.3 }
-	react-resizable-panels:group-id	Same format as above, but whichever combination was rendered most recently.

---

This commit updates the useDefaultLayout hook so that it falls back to an older version 2/3 layout if a version 4 layout is not found.

The logic for this is as follows:

flowchart TD
    START[useDefaultLayout] --> IDS{Has panel ids?}

    IDS                  -->|No| IDS_NO{Saved data?}
      IDS_NO             -->|Yes| IDS_NO_VERSION{Which version?}
        IDS_NO_VERSION   -->|Version 4| IDS_NO_VERSION_4[Use layout]
        IDS_NO_VERSION   -->|Version 3| IDS_NO_VERSION_3[How many layouts?]
          IDS_NO_VERSION_3    -->|1 layout| IDS_NO_VERSION_3_1[Convert legacy layout]
          IDS_NO_VERSION_3 -->|2+ layouts| IDS_NO_VERSION_3_MORE[No default layout]
      IDS_NO             -->|No| IDS_NO_UNDEFINED[No default layout]

    IDS                  -->|Yes| IDS_YES{Saved data?}
      IDS_YES            -->|Yes| IDS_YES_VERSION{Which version?}
        IDS_YES_VERSION  -->|Version 4| IDS_YES_VERSION_4[Use layout]
        IDS_YES_VERSION  -->|Version 3| IDS_YES_VERSION_3[Convert legacy layout]
      IDS_YES            -->|No| IDS_YES_FALLBACK[Check for legacy data]

Loading

---

Resolves #605

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-resizable-panels	Ready	Preview	Mar 28, 2026 3:16pm