Skip possible nested context when passing React children.

react-context-portal.tsx

import { createContext, use, useState } from 'react';
import { createPortal } from 'react-dom';
import { createRoot } from 'react-dom/client';

const Context = createContext<string>('')

function Test() {
  const theme = use(Context)

  return <div>"{theme}"</div>
}

interface Props {
  children?: React.ReactNode;
}

function NestedService(props: Props) {
  return (
    <Context.Provider value='nested'>
      {props.children}
    </Context.Provider>
  )
}

function App() {
  const [dom, setDOM] = useState<HTMLElement | null>(null)
  const widget = <Test />

  // Notice how this code does NOT know anything about contexts outside and inside.
  return <>
    <NestedService>
      <div ref={setDOM} />
    </NestedService>
    {dom && createPortal(widget, dom)}
  </>
}

createRoot(document.querySelector('#app')!).render(
  <Context.Provider value='app'>
    <App />
  </Context.Provider>
)