Use different layouts at high level of tree without clobbering all local state
Hey there! I hope you're having a great day.
I'm working on a WYSIWYG editor for my employer, and I'm running into a bit of an issue and I wasn't sure the best way to solve this. There are multiple different "layouts" that can be selected, which correspond to a user's desired layout of the page (e.g. page as viewed on mobile vs. desktop, show these items in accordion rather than tab, etc.). At a high level of the component tree, we've got items like <StandardLayout /> and <MobileLayout /> that we conditionally render depending on what the user has selected.
This will retain the widgets a user has added to the page, but simply format things in a different way. However, this also effectively clobbers all local state going all the way down. Often times this is a minor inconvenience - we can simply elevate the state for one or two necessary values. However, recently I've been working on giving two widgets the ability to execute an image upload process at the same time as one another, and have provided each with its own context provider to faciltiate this, and I'm noticing this can be a serious usability issue.
I could, of course, simply disable the ability to change view until I know the "coast is clear", so to speak, but I wasn't sure if there was a better way, as I'm sure this is a common enough problem. I figure I could elevate the state more globally, and simply keep state for each widget in an object they can index into with their ID, but each one simply having a more local context seems more clean to me. I was hoping perhaps there was a way to leverage portals for this - wrap the context provider around the entire app rather than locally around the widget when it renders, but I haven't been able to figure that out and it doesn't really seem workable. Maybe something like leveraging local storage when I detect a change is happening?
If anyone has any advice, I'd really appreciate it. I hope you're having a great day - thank you!
0 Replies