Context

Context allows components to share behavior and state across a subtree, enabling powerful composition patterns without tightly coupling components together.

A context is created with createContext. The returned value is itself a Context component that provides a value to its descendants.

<ThemeContext value={themeState}>
  {/* ... */}
</ThemeContext>

Any descendant component can read the nearest value using useContext:

const theme = useContext(ThemeContext)

If no matching context exists in the component tree, useContext returns the default value passed to createContext.

Example

import { createContext, signal } from "kiru"

interface ThemeContextValue {
  value: Kiru.Signal<"light" | "dark">
  toggle: () => void
}

export const ThemeContext = createContext<ThemeContextValue>(null!)

export const useTheme = () => useContext(ThemeContext)