@tanstack/devtools-utils/dist/react/esm/panel.js

TanStack Devtools utilities for creating your own devtools.

import { useEffect, useRef } from "react";
import { Fragment, jsx } from "react/jsx-runtime";
//#region src/react/panel.tsx
/**
* Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.
* @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'
* @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')
* @returns A React component that mounts the devtools
* @example
* ```tsx
* // if the export is default
* const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')
* ```
*
* @example
* ```tsx
* // if the export is named differently
* const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')
* ```
*/
function createReactPanel(CoreClass) {
	function Panel(props) {
		const devToolRef = useRef(null);
		const devtools = useRef(null);
		useEffect(() => {
			if (devtools.current) return;
			devtools.current = new CoreClass();
			if (devToolRef.current) devtools.current.mount(devToolRef.current, props);
			return () => {
				if (devToolRef.current) {
					devtools.current?.unmount();
					devtools.current = null;
				}
			};
		}, [props]);
		return /* @__PURE__ */ jsx("div", {
			style: { height: "100%" },
			ref: devToolRef
		});
	}
	function NoOpPanel(_props) {
		return /* @__PURE__ */ jsx(Fragment, {});
	}
	return [Panel, NoOpPanel];
}
//#endregion
export { createReactPanel };

//# sourceMappingURL=panel.js.map