Type of the context value
Fallback value used when no <Provider> is found in the ancestor chain
Context object with a .Provider component (and .defaultValue for reference)
// settings.ts
export const GameSettingsContext = createContext({
difficulty: "normal",
soundVolume: 0.7,
showParticles: true
});
// Root or layout component
<GameSettingsContext.Provider value={{ difficulty: currentMode, soundVolume: 0.5, showParticles: false }}>
<HUD />
<GameWorld />
</GameSettingsContext.Provider>
// Deep child component
const settings = useContext(GameSettingsContext);
usePaint(ctx => {
if (settings.showParticles) {
// draw fancy effects
}
});
useContext — to consume the context value in any descendant
Creates a context object for sharing values across the component tree without manual prop drilling.
Unlike React, the Provider is a regular functional component — use it like any other Kayla component. The context value is provided via the
valueprop on<Provider>.This is not a hook — call it at the top level of your module (outside components).