Contexts

Contexts provide an easy way to share data between components without drilling props through multiple levels of the component hierarchy.

It is common to use the new type idiom as the type of the context value. Suppose we want to create a global dark mode state. We could then define the following DarkMode struct.

#[derive(Clone, Copy, PartialEq, Eq)]
struct DarkMode(Signal<bool>);

impl DarkMode {
    fn is_enabled(self) -> bool {
        self.0.get()
    }

    fn toggle(self) {
        self.0.set(!self.0.get());
    }
}

Providing contexts

To make a context value accessible in child components, use the provide_context function.

let dark_mode = DarkMode(create_signal(false));
provide_context(dark_mode);

Using contexts.

Once the context has been provided, it can be used in any nested scope including from the same scope where the context value was provided.

To access the context, use the use_context method.

#[component]
fn ChildComponent() -> View {
    let dark_mode = use_context::<DarkMode>();
    // ...
}

provide_context::<DarkMode>(...);
view! {
    ChildComponent {}
}

The context value is not reactive by itself. If you want to make a context state reactive, make sure to wrap it inside a signal.