Possible to control Disclosure open state via URL?

[deltasierra96]

As the title suggests, is it possible to control the open state of a Disclosure component if a URL condition is met?

I'm trying to create a sidebar navigation component that stays open on page refreshes if the element in the Disclosure panel contains the current pathname or other conditions in the URL.

[snowystinger]

Sure, you can set your state based on the URL, and you can use state to control the expanded state.
https://react-spectrum.adobe.com/react-aria/Disclosure.html#expanded

You can check the URL based on https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event or through whatever Router you're using, there's probably a way to watch the URL.

If this isn't what you mean, maybe a codesandbox or stackblitz would be useful to illustrate the issue.

[deltasierra96]

Thanks for the reply.

I was able to get it to work with the provided props via useEffect, however is there is a way to stop the jarring animation when it opens on the client? I'm assuming the only solution is to pass a Boolean value to the Disclosure's "defaultExpanded" prop from the server, but it seems more of a headache than I'd like to tackle.

[snowystinger]

The server should know the url state, so could probably apply the correct boolean. Otherwise, you could possibly use a layout effect instead of an effect to get ahead of the render. Or, you could derive the state in render? It should need to be in an effect, you can just read the URL window.location.href, the popstate_event is just so you can respond to changes in the URL after initial render.