My question: Is there a way to save a React component's rendered state such that it can be re-mounted in a different browser session so that it displays the same as when it was in the state in which it was saved?
If it helps, below are the details of my current use case.
I am working with a library of external components that are used to go through a series of steps that essentially are separate forms, and I need to save the state of one of the library's components. (Specifically it is an input that takes a file of a specified type, but that is not really important for this question).
I can already store and retrieve the required data in browser storage, so this is not a problem. But when the component is re-rendered, say if a user goes back to a previous step in the app and returns, the component's state is not able to be set programmatically, without the user performing the same actions. (In my case users cannot see the files that they have selected.)
The state also needs to persist between browser sessions, which functions well for other components that enable setting state via props.
I have no control over, and am required to use, these components for our UI library. There are no props or any API that allows for the component to set its state to show the previously-selected files, other than when they are selected by the user, which is then reset on re-rendering. The only props available are not able to show the files.
I have thought of 3 possible remedies, none of which are particularly favorable or scalable:
- Reinvent the wheel: Fake the UI of the external component by attempting to recreate the rendered DOM elements manually with my own component.
- Save all the things: Somehow store the component itself / the rendered DOM + CSS properties in browser storage.
- Just do something?: Implement my own UI / UX to show that files have been selected. I would also have to hide the UI that shows up in the external component so that the UX isn't wonky with multiple indicators when files get selected.
(Note: this component is rendered with dynamically-rendered class names via CSS-in-JS, which are used for the styling of the component. Thus, I would need to store or render essentially all style properties because attempting to apply styling via class names is not going to work.)
Clearly none of these are great, and all are pretty hacky. Is there any better way to save the state of an externally-rendered component?