TanStack Devtools is a set of tools for building advanced devtools for your React application.
npm install @tanstack/react-devtoolsThis package is still under active development and might have breaking changes in the future. Please use it with caution.
``tsx`
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
function App() {
return (
My App
{
name: 'TanStack Query',
render:
},
{
name: 'TanStack Router',
render:
},
]}
/>
)
}
In order to create a plugin for TanStack Devtools, you can use the plugins prop of the TanStackDevtools component. Here's an example of how to create a simple plugin:
`tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
function App() {
return (