Defined in: devtools/src/core.tsx:13
optional config: Partial<{
customTrigger: (el, props) => void;
defaultOpen: boolean;
hideUntilHover: boolean;
openHotkey: KeyboardKey[];
panelLocation: "top" | "bottom";
position: TriggerPosition;
requireUrlFlag: boolean;
theme: "light" | "dark";
triggerHidden: boolean;
urlFlag: string;
}>;
optional config: Partial<{
customTrigger: (el, props) => void;
defaultOpen: boolean;
hideUntilHover: boolean;
openHotkey: KeyboardKey[];
panelLocation: "top" | "bottom";
position: TriggerPosition;
requireUrlFlag: boolean;
theme: "light" | "dark";
triggerHidden: boolean;
urlFlag: string;
}>;
Defined in: devtools/src/core.tsx:19
Configuration for the devtools shell. These configuration options are used to set the initial state of the devtools when it is started for the first time. Afterwards, the settings are persisted in local storage and changed through the settings panel.
optional eventBusConfig: ClientEventBusConfig;
optional eventBusConfig: ClientEventBusConfig;
Defined in: devtools/src/core.tsx:40
optional plugins: TanStackDevtoolsPlugin[];
optional plugins: TanStackDevtoolsPlugin[];
Defined in: devtools/src/core.tsx:39
Array of plugins to be used in the devtools. Each plugin has a render function that gives you the dom node to mount into
Example:
const devtools = new TanStackDevtoolsCore({
plugins: [
{
id: "your-plugin-id",
name: "Your Plugin",
render: (el) => {
// Your render logic here
},
},
],
})
const devtools = new TanStackDevtoolsCore({
plugins: [
{
id: "your-plugin-id",
name: "Your Plugin",
render: (el) => {
// Your render logic here
},
},
],
})
