TanStack Devtools React Adapter

If you are using TanStack Devtools in a React application, we recommend using the React Adapter. The React Adapter provides a set of easy-to-use hooks on top of the core Devtools utilities. If you find yourself wanting to use the core Devtools classes/functions directly, the React Adapter will also re-export everything from the core package.

Installation

npm install @tanstack/react-devtools

Component: TanStackDevtools

The main React component for rendering devtools. It accepts a single props object of type TanStackDevtoolsReactInit:

Plugin Type: TanStackDevtoolsReactPlugin

Each plugin describes a tab in the devtools panel:

type PluginRender =
  | JSX.Element
  | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)

type TanStackDevtoolsReactPlugin = {
  id?: string
  name: string | PluginRender
  render: PluginRender
  defaultOpen?: boolean
}

• render can be a JSX element (simplest -- just pass <YourPanel />) or a function that receives the container element and current { theme, devtoolsOpen } props. The function form is useful when you need to access the raw DOM element or respond to plugin state changes.
• name works the same way -- use a string for plain text, or JSX / a function for custom tab titles.
• id is an optional unique identifier. If omitted, it is generated from the name.
• defaultOpen marks the plugin as initially active when no other plugins are open.

Usage Example

import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools
        config={{ position: 'bottom-right', hideUntilHover: true }}
        eventBusConfig={{ connectToServerBus: true }}
        plugins={[
          {
            name: 'TanStack Query',
            render: <ReactQueryDevtoolsPanel />,
            defaultOpen: true,
          },
        ]}
      />
    </>
  )
}

RSC Compatibility

The adapter includes a 'use client' directive at the top of its entry file, making it compatible with React Server Components. You can import it directly in your client components without needing to add your own 'use client' boundary.

Exports

The @tanstack/react-devtools package exports:

• TanStackDevtools -- the main component
• TanStackDevtoolsReactPlugin -- type for plugin objects
• TanStackDevtoolsReactInit -- type for the component's props