React to ShadowJS: Context

Context

createContext(defaultValue?) returns a component that provides a value; Ctx.Provider is the same component, so both <Ctx value={x}> and <Ctx.Provider value={x}>…

For agentsUpdated 2026-10-20

createContext(defaultValue?) returns a component that provides a value; Ctx.Provider is the same component, so both <Ctx value={x}> and <Ctx.Provider value={x}> work. The provided value is read once. To provide something that changes, provide an accessor or a store. useContext throws when there is no provider and no default, because no correct value exists.

src/theme.tsxtsx

import { type Accessor, createContext, useContext, useStore } from "@shadow-js/core";

export const Theme = createContext<Accessor<string>>(() => "light");
export const [theme, setTheme] = useStore("dark");

function Label() {
  const current = useContext(Theme);
  return <p>theme {current()}</p>;
}

export function Page() {
  return (
    <Theme.Provider value={theme}>
      <Label />
    </Theme.Provider>
  );
}