Interface: TanStackDevtoolsInit

Properties

config?

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.

eventBusConfig?

optional eventBusConfig: ClientEventBusConfig;

Defined in: devtools/src/core.tsx:40

plugins?

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
       },
     },
   ],
 })