📄 tanstack/query/latest/docs/framework/react/examples/shadow-dom

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

Code ExplorerCode

Interactive SandboxSandbox

src
- DogList.tsx
- index.css
- main.tsx
- vite-env.d.ts
.gitignore
README.md
eslint.config.js
index.html
package.json
tsconfig.json
vite.config.ts

tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { DogList } from './DogList'

const appRoot = document.getElementById('root')

if (appRoot) {
  const queryClient = new QueryClient()
  const shadowRoot = appRoot.attachShadow({ mode: 'open' })
  const root = ReactDOM.createRoot(shadowRoot)

  root.render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <div
          style={{
            width: '100vw',
            padding: '30px',
          }}
        >
          <h2>Dog Breeds</h2>
          <DogList />
        </div>
        <ReactQueryDevtools
          initialIsOpen={false}
          buttonPosition="bottom-left"
          shadowDOMTarget={appRoot.shadowRoot!}
        />
      </QueryClientProvider>
    </React.StrictMode>,
  )
}


import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { DogList } from './DogList'

const appRoot = document.getElementById('root')

if (appRoot) {
  const queryClient = new QueryClient()
  const shadowRoot = appRoot.attachShadow({ mode: 'open' })
  const root = ReactDOM.createRoot(shadowRoot)

  root.render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <div
          style={{
            width: '100vw',
            padding: '30px',
          }}
        >
          <h2>Dog Breeds</h2>
          <DogList />
        </div>
        <ReactQueryDevtools
          initialIsOpen={false}
          buttonPosition="bottom-left"
          shadowDOMTarget={appRoot.shadowRoot!}
        />
      </QueryClientProvider>
    </React.StrictMode>,
  )
}

Algolia

Devtools Embedded Panel

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

scarf analytics