📄 tanstack/devtools/latest/docs/framework/react/examples/custom-devtools

============================================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

public
src
- App.tsx
- CustomDevtoolsPanel.tsx
- counter.ts
- eventClient.ts
- index.tsx
.eslintrc.cjs
.gitignore
README.md
index.html
package.json
tsconfig.json

tsx

import { useState } from 'react'

import { createCounter } from './counter'

const counterInstance = createCounter()

export default function App() {
  const [count, setCount] = useState(counterInstance.getCount())

  const increment = () => {
    counterInstance.increment()
    setCount(counterInstance.getCount())
  }

  const decrement = () => {
    counterInstance.decrement()
    setCount(counterInstance.getCount())
  }

  return (
    <div>
      <h1>Custom plugins</h1>
      <h2>Count: {count}</h2>
      <div style={{ display: 'flex', gap: '4px' }}>
        <button onClick={increment}>+ increase</button>
        <button onClick={decrement}>− decrease</button>
      </div>
    </div>
  )
}


import { useState } from 'react'

import { createCounter } from './counter'

const counterInstance = createCounter()

export default function App() {
  const [count, setCount] = useState(counterInstance.getCount())

  const increment = () => {
    counterInstance.increment()
    setCount(counterInstance.getCount())
  }

  const decrement = () => {
    counterInstance.decrement()
    setCount(counterInstance.getCount())
  }

  return (
    <div>
      <h1>Custom plugins</h1>
      <h2>Count: {count}</h2>
      <div style={{ display: 'flex', gap: '4px' }}>
        <button onClick={increment}>+ increase</button>
        <button onClick={decrement}>− decrease</button>
      </div>
    </div>
  )
}

TanStack Start

Partners Become a Partner