Ability to override persisted layout

[axelboc]

I'm working on a component with a simple horizontal group with two panels: a collapsible sidebar with defaultSize="25%" and a main area. I would like to add the ability to force the sidebar to be collapsed on initial mount, disregarding any layout persisted to local storage.

Basically, I'd like to add a prop called sidebarOpen with the following behaviour:

• true => always force initial layout to { sidebar: 25, main: 75 }
• false => always force initial layout to { sidebar: 0, main: 100 }
• undefined => restore layout from storage (or default to { sidebar: 25, main: 75 } if there's nothing in storage)

When using useDefaultLayout, is there a way to ignore/override/reset the default layout from local storage on first render? I'd like to avoid a useEffect if possible.

Thanks a lot for this amazing, feature-full and modern library 🫶

[bvaughn]

When using useDefaultLayout, is there a way to ignore/override/reset the default layout from local storage on first render? I'd like to avoid a useEffect if possible.

It sounds like you just don’t want to use the persisted layout? You don’t have to use that hook. That’s only if you want the last layout to be restored, which it sounds like you don’t.

Just set the Panel’s defaultSize to be whatever its collapsedSize is and you should be good to go 🙂

[axelboc]

You're totally right, when the prop is set I basically don't want to use the hook. The challenge is that hooks can't be called conditionally of course. I could render two different components, but that's not very convenient.

Fortunately, I just realised I can pass the defaultLayout to the Group conditionally, which solves my use case!

<Group defaultLayout={initialSidebarOpen ? defaultLayout : undefined} /* ... */>
  <Panel defaultSize={initialSidebarOpen ? '25%' : '0%'} /* ... */>

Thanks a lot for your time. 😊

[bvaughn]

Awesome 👏 you’re welcome