[Question] How do I create new panel after onReady?

[antoKeinanen]

Hi! I want to create a new panel for my panel view after onReady has run for example later on button press. How can I achieve this?

[techbech]

I do something like the following

const components: PanelCollection<IDockviewPanelProps> = {
	default: (props: IDockviewPanelProps) => {
		return <div>{"Hello world"}</div>;
	},
};

function useDockviewApiRef() {
	const dockviewApi = useRef<DockviewApi | null>(null);
	return {
		onReady: (event: DockviewReadyEvent) => {
			dockviewApi.current = event.api;
		},
		get: () => {
			if (dockviewApi.current == null) {
				throw new Error("Dockview api is not ready");
			}
			return dockviewApi.current;
		},
	};
}

export function Layout() {
	const api = useDockviewApiRef();
	return (
		<>
			<button
				onClick={() => {
					api.get().addPanel({
						id: "my-window",
						title: "my-window",
						component: "default",
					});
				}}
			>
				Open
			</button>
			<DockviewReact className="dockview dockview-theme-dark" components={components} onReady={api.onReady} />
		</>
	);
}

I can't say if this is the best practice, but it has worked great for me so far.

[antoKeinanen]

This worked well for me. Thank you!

[mathuo]

The onReady(event: DockviewReadyEvent): void method exposes an api object that you can use to interact with the component. Using the api you can control every feature of the component including the adding of panels.

How you then store that api object is personal design choice. You could use a React Ref like @techbech has or you may choose to store that object as React State. For example here is a minimal sandbox you can run that has a button which you click to add new panels.

https://codesandbox.io/s/vigorous-cori-7ms6xh?file=/src/app.tsx:583-601

Let me know if you have any further questions!

[techbech]

I use useRef instead of useState for two reasons.

• useState causes a rerender when dispatching the state
• I don't understand the inner workings of Dockview well enough to tell if any of the state of the API object can change. In such case, the state will not propagate to the useState if it's a shallow change. Therefor I think it makes sense to use a useRef as it references the "real" object.