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. They write to it with subject.next(...) via useSetMode().

Both components inside the provider share the same subject, so switching the mode updates them together. 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