Dynamically Controlling Components

[pele1410]

My application contains several components (overhead map, guidance panel) that are known apriori by the App object that renders the <DockviewReact>. I create it like so:

<DockviewReact
    onReady={onReady}
    components={components}
    className={'dockview-theme-light'}
/>

where {components} is a list of two:

const components = {
    default: (props: IDockviewPanelProps) => {
        return <MainComponent />;
    },
    guidance_panel: (props: IDockviewPanelProps) => {
        return <GuidancePanelComponent />;
    },
};

What I am interested in is having the ability to add new components arbitrarily. I want to be able to press a button and call something like:

dockviewApi.addPanel({
            id: 'camera',
            component: 'camera',
            renderer: 'always',
            title: 'Camera',
            floating: {
                position: {left: 10, bottom: 10},
                width: 400,
                height: 300,
            },
        });

The catch is I don't know apriori to the <DockviewApi> object creation that this camera component needs to exist. I'd like to be able to just add it and then call addPanel.

I'm not sure if I'm just missing some understanding of what the components are in <DockviewReact> or if it's just not possible. Any help would be appreciated.

[mathuo]

In the case where you need dynamic components the approach I would recommend is to register a single component with dockview and have that component call into a dynamic collection of components that you maintain. You can pass that dynamic components name into the panel at the time of creation using the params property.

Anything in params is persisted with the dockview state.

Let me know if that's useful?

const dynamicComponents: Record<string, React.FC> = {
    component_1: () => {
        return <div>{'component_1'}</div>;
    },
};

const components = {
    default: (
        props: IDockviewPanelProps<{ arbitraryComponentName: string }>
    ) => {
        const name = props.params.arbitraryComponentName;

        const Component = dynamicComponents[name];

        return Component ? <Component /> : null;
    },
};

const RootComponent = () => {
    const onReady = (event: DockviewReadyEvent) => {
        event.api.addPanel({
            id: 'panel_1',
            component: 'default',
            params: { arbitraryComponentName: 'component_1' },
        });
    };

    return <DockviewReact components={components} onReady={onReady} />;
};

[pele1410]

This worked for me. Appreciate the help.