Mention how to manage shared state that isn't "params"

[mcapodici]

Is your feature request related to a problem? Please describe.

From the documentation I cannot figure out the best way to manage state

Here https://dockview.dev/docs/core/panels/update, it says

Use this feature sparingly: Anything you assign to the params options of a panel will be saved when calling api.toJSON(). Only use this to store small amounts of static view data. Do not use this to store application state or dynamic panel state.

I would like to know how you would typically get application state to a panel.

Without dockview, you can just use props. Dockview effectively cuts off the prop chain to your component.

Example scenario. Panel 1 is an editor. Panel 2 is a Markdown preview. How to get the latest edits from Panel 1 to render on Panel 2?

Do I need MobX or similar?

Describe the solution you'd like

Something in the documentation to describe how you would do this.

Describe alternatives you've considered

I have looked in your examples and in your documentation but there are not examples that cover this.

[mcapodici]

I got something to work using React context. I think this might be the simplest way to do it. Wrap the <DockviewReact> in a context that is specifically for that Dockview, and then any prop based data you want to pass down to panels can exist there.

[mcapodici]

If you think this is a good approach, I am happy to PR to add an example.

[mathuo]

Correct, dockview doesn't provide a way for you to render React components directly as children because of a number of reasons - mostly because the panels can be deserialized from application state and this requires assigning react components to ids etc etc... described more in Registering and Adding.

The purpose of the params that you can provide to each panel are more for static purposes, something you may wish to persist with layout, perhaps...

api.addPanel(
id: 'my_stock_panel', component: 'stock_view', params: { ticker: 'APPL' )

....where it's useful that the params are saved as a part of the layout.

Under the hood though each panel is added to React through React Portals so things like React Context and the React DOM Tree are well preserved.

If you have any good examples of sending through application state without using a full state mananger (redux, mobx etc) I would be more than happy to accept PRs - the more examples and docs the better in my opinion.

[mathuo]

Closing due to inactivity - will re-open if further questions posted.

[mcapodici]

If you have any good examples of sending through application state without using a full state mananger (redux, mobx etc) I would be more than happy to accept PRs - the more examples and docs the better in my opinion.

Yes it can be done using useContext, which comes with React. Happy to do a PR of a basic example. Been using it for a while and had no problems.