React context

Observables travel through React context like any other value. Here a Subject lives in a context provider; components read it with useObservable via a small useModeValue() hook and write to it with subject.next(...) via useSetMode().

Both components inside the provider share the same subject, so switching the mode updates them together — while the component outside the provider reads the default context value and never changes.

import {useMemo} from 'react'
import {Subject} from 'rxjs'

import {
  ContextProvider,
  MODE,
  type Scheme,
  useModeValue,
} from './context'
import ModeSwitcher from './ModeSwitcher'

function App() {
  const mode = useModeValue()

  return (
    <div
      style={{
        ...MODE[mode],
        padding: '1em',
      }}
    >
      <h2>Using {mode} mode</h2>
      <ModeSwitcher />
    </div>
  )
}

function Layout() {
  const mode = useMemo(
    () => new Subject<Scheme>(),
    [],
  )

  return (
    <>
      <h1>Wrapped in ContextProvider</h1>
      <ContextProvider value={mode}>
        <App />
        <App />
      </ContextProvider>
      <hr />
      <h1>Not wrapped in a Context.Provider</h1>
      <App />
    </>
  )
}

export default Layout

Open Sandbox