Grundlegende Einrichtung

TanStack Devtools bietet Ihnen ein einfach zu bedienendes und modulares Client-Tool, mit dem Sie mehrere Devtools zu einem einfach zu bedienenden Panel zusammenstellen können.

Einrichtung

Installieren Sie die TanStack Devtools Bibliothek. Dies installiert den Devtools-Kern und stellt Ihnen frameworkspezifische Adapter zur Verfügung.

bash

npm i @tanstack/react-devtools

npm i @tanstack/react-devtools

Importieren Sie als Nächstes im Stammverzeichnis Ihrer Anwendung die Komponente TanStackDevtools aus dem erforderlichen Framework-Adapter (in diesem Fall @tanstack/react-devtools).

tsx

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

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)

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

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)

Importieren Sie die gewünschten Devtools und übergeben Sie sie an die TanStackDevtools Komponente zusammen mit einem Label für das Menü.

Derzeit bietet TanStack

QueryDevtools
RouterDevtools
PacerDevtools
FormDevtools bald verfügbar

tsx

import { createRoot } from 'react-dom/client'

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

import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { ReactFormDevtoolsPanel } from '@tanstack/react-form-devtools'


import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
        },
        {
          name: 'TanStack Form',
          render: <ReactFormDevtoolsPanel />,
        },
      ]}
    />
  </StrictMode>,
)

import { createRoot } from 'react-dom/client'

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

import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { ReactFormDevtoolsPanel } from '@tanstack/react-form-devtools'


import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
        },
        {
          name: 'TanStack Form',
          render: <ReactFormDevtoolsPanel />,
        },
      ]}
    />
  </StrictMode>,
)

Fügen Sie abschließend beliebige zusätzliche Konfigurationen zur TanStackDevtools Komponente hinzu. Weitere Informationen finden Sie im Abschnitt TanStack Devtools Konfiguration.

Ein vollständiges funktionsfähiges Beispiel finden Sie in unserem Basisbeispiel.

Einrichtung

Bytes abonnieren

Bytes abonnieren