tanstackdevtoolsplugin.md

id	TanStackDevtoolsPlugin
title	TanStackDevtoolsPlugin

Interface: TanStackDevtoolsPlugin

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

Properties

id?

optional id: string;

Defined in: context/devtools-context.tsx:47

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

---

name

name: string | (el) => void;

Defined in: 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: () => {}
  }

or

  {
    // 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) => void;

Defined in: context/devtools-context.tsx:61

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.

Returns

void

void

Example:

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