Interface: TanStackDevtoolsPlugin

Defined in: devtools/src/context/devtools-context.tsx:15

Properties

defaultOpen?

optional defaultOpen: boolean;

optional defaultOpen: boolean;

Defined in: devtools/src/context/devtools-context.tsx:58

Whether the plugin should be open by default when there are no active plugins. If true, this plugin will be added to activePlugins on initial load when activePlugins is empty.

Default

false

false

destroy()?

optional destroy: (pluginId) => void;

optional destroy: (pluginId) => void;

Defined in: devtools/src/context/devtools-context.tsx:77

Parameters

pluginId

string

Returns

void

id?

optional id: string;

optional id: string;

Defined in: devtools/src/context/devtools-context.tsx:52

Unique identifier for the plugin. If not provided, it will be generated based on the name.

name

name: string | (el, theme) => void;

name: string | (el, theme) => void;

Defined in: devtools/src/context/devtools-context.tsx:42

Name to be displayed in the devtools UI. If a string, it will be used as the plugin name. If a function, it will be called with the mount element.

Example:

  {
    // If a string, it will be used as the plugin name
    name: "Your Plugin",
    render: () => {}
  }

  {
    // If a string, it will be used as the plugin name
    name: "Your Plugin",
    render: () => {}
  }

  {
    // If a function, it will be called with the mount element
    name: (el) => {
      el.innerText = "Your Plugin Name"
      // Your name logic here
    },
    render: () => {}
  }

  {
    // If a function, it will be called with the mount element
    name: (el) => {
      el.innerText = "Your Plugin Name"
      // Your name logic here
    },
    render: () => {}
  }

render()

render: (el, theme) => void;

render: (el, theme) => void;

Defined in: devtools/src/context/devtools-context.tsx:72

Render the plugin UI by using the provided element. This function will be called when the plugin tab is clicked and expected to be mounted.

Parameters

el

HTMLDivElement

The mount element for the plugin.

theme

"light" | "dark"

Returns

void

Example:

  render: (el) => {
    el.innerHTML = "<h1>Your Plugin</h1>"
  }

  render: (el) => {
    el.innerHTML = "<h1>Your Plugin</h1>"
  }