Raxol.UI.State.Context (Raxol v2.0.1)
View SourceReact-style Context API for Raxol UI components.
Context provides a way to pass data through the component tree without having to pass props down manually at every level. This is especially useful for data that many components in an application need to access (such as theme, user authentication, etc.).
Usage
# Create a context
theme_context = Context.create_context(%{theme: :light, colors: %{}})
# Provide context to component tree
%{
type: :context_provider,
attrs: %{
context: theme_context,
value: %{theme: :dark, colors: %{primary: "#007acc"}}
},
children: [
%{type: :themed_button, attrs: %{label: "Click me"}}
]
}
# Consume context in a component
defmodule ThemedButton do
use Raxol.UI.Components.Base.Component
def render(state, context) do
theme = Context.use_context(context, :theme_context)
button(
label: state.label,
style: %{
background: theme.colors.primary,
theme: theme.theme
}
)
end
endSummary
Functions
Combines multiple contexts into a single provider.
Creates an application context for global app state.
Creates a context consumer component for more explicit context consumption.
Creates a new context with a default value.
Creates a context provider component that supplies context value to its children.
Creates a theme context with common theme properties.
Creates a user context for authentication and user data.
Processes a context consumer, calling the render function with the context value.
Processes a context provider, managing context propagation to children.
Subscribes to context changes for reactive updates.
Updates context value and notifies subscribers.
Consumes a context value from the component's render context.
Creates a higher-order component that injects context as props.
Functions
Combines multiple contexts into a single provider.
Example
combined_provider = Context.combine_providers([
{theme_context, %{theme: :dark}},
{user_context, %{user: current_user}},
{app_context, %{version: "1.0.0"}}
], children)Creates an application context for global app state.
Creates a context consumer component for more explicit context consumption.
Example
%{
type: :context_consumer,
attrs: %{
context: theme_context,
render: fn theme ->
%{type: :text, attrs: %{content: "Current theme: #{theme.theme}"}}
end
}
}Creates a new context with a default value.
Examples
iex> theme_context = Context.create_context(%{theme: :light})
%ContextDef{name: :theme_context, default_value: %{theme: :light}}Creates a context provider component that supplies context value to its children.
Creates a theme context with common theme properties.
Creates a user context for authentication and user data.
Processes a context consumer, calling the render function with the context value.
Processes a context provider, managing context propagation to children.
Subscribes to context changes for reactive updates.
Example
Context.subscribe_to_context(:theme_context, fn new_theme ->
# Re-render components that depend on theme
Component.request_update(self(), :theme_changed)
end)Updates context value and notifies subscribers.
This is useful for contexts that need to change over time (e.g., theme switching).
Consumes a context value from the component's render context.
This function should be called within a component's render function to access the nearest context provider's value.
Creates a higher-order component that injects context as props.
Example
themed_button = Context.with_context(Button, theme_context, fn theme, props ->
Map.merge(props, %{theme: theme.theme, colors: theme.colors})
end)