Raxol.UI.Components.Patterns.HigherOrder (Raxol v2.0.1)
View SourceHigher-Order Components (HOCs) for Raxol UI.
Higher-Order Components are a pattern for reusing component logic. A HOC is a function that takes a component and returns a new component with enhanced functionality.
Common Use Cases
- Authentication/Authorization
- Loading states
- Error boundaries
- Data fetching
- Styling/Theming
- Logging/Analytics
- Performance optimization
Usage
# Create a HOC that adds loading state
with_loading = HigherOrder.with_loading_state()
# Enhance a component
enhanced_user_list = with_loading.(UserList)
# Use the enhanced component
%{
type: enhanced_user_list,
attrs: %{users: users, loading: loading}
}
# Chain multiple HOCs
super_enhanced = HigherOrder.chain([
HigherOrder.with_loading_state(),
HigherOrder.with_error_boundary(),
HigherOrder.with_analytics("user_list_component")
]).(UserList)Summary
Functions
Chains multiple HOCs together.
Creates a conditional HOC that only applies enhancement based on a condition.
Creates a HOC that adds analytics tracking.
Creates a HOC that provides authentication context and guards.
Creates a HOC that adds data fetching capabilities.
Creates a HOC that adds error boundary functionality.
Creates a HOC that adds loading state management.
Creates a HOC that adds memoization to prevent unnecessary re-renders.
Creates a HOC that adds performance monitoring.
Creates a HOC that adds theming capabilities.
Functions
Chains multiple HOCs together.
Examples
super_hoc = HigherOrder.chain([
HigherOrder.with_loading_state(),
HigherOrder.with_error_boundary(),
HigherOrder.with_authentication(required_permissions: [:admin]),
HigherOrder.with_analytics("admin_panel")
])
SuperAdminPanel = super_hoc.(AdminPanel)Creates a conditional HOC that only applies enhancement based on a condition.
Examples
conditional_auth = HigherOrder.when_condition(
fn props -> props.require_auth end,
HigherOrder.with_authentication()
)Creates a HOC that adds analytics tracking.
Enhanced Props
:track_event- Function to track analytics events:component_id- Unique identifier for analytics
Examples
with_analytics = HigherOrder.with_analytics("user_profile")
TrackedComponent = with_analytics.(UserProfile)Creates a HOC that provides authentication context and guards.
Enhanced Props
:user- Current authenticated user (nil if not authenticated):authenticated- Boolean indicating authentication status:permissions- List of user permissions:has_permission- Function to check permissions
Examples
with_auth = HigherOrder.with_authentication()
ProtectedComponent = with_auth.(AdminPanel)Creates a HOC that adds data fetching capabilities.
Enhanced Props
:data- Fetched data (nil while loading):loading- Boolean indicating fetch in progress:error- Fetch error (nil if no error):refetch- Function to refetch data
Examples
with_data = HigherOrder.with_data_fetching(fn props ->
fetch_users(props.organization_id)
end)
DataDrivenComponent = with_data.(UserList)Creates a HOC that adds error boundary functionality.
Enhanced Props
:error- Current error (nil if no error):clear_error- Function to clear the error:on_error- Function to report errors
Examples
with_error_boundary = HigherOrder.with_error_boundary()
SafeComponent = with_error_boundary.(RiskyComponent)Creates a HOC that adds loading state management.
Enhanced Props
:loading- Boolean indicating loading state:set_loading- Function to update loading state
Examples
with_loading = HigherOrder.with_loading_state()
LoadingUserList = with_loading.(UserList)
# The enhanced component will have access to loading stateCreates a HOC that adds memoization to prevent unnecessary re-renders.
Examples
with_memo = HigherOrder.with_memoization(fn props -> [props.data, props.config] end)
MemoizedComponent = with_memo.(ExpensiveComponent)Creates a HOC that adds performance monitoring.
Enhanced Props
:performance- Performance metrics:start_timer- Function to start timing operations:end_timer- Function to end timing operations
Examples
with_perf = HigherOrder.with_performance_monitoring()
MonitoredComponent = with_perf.(ExpensiveComponent)Creates a HOC that adds theming capabilities.
Enhanced Props
:theme- Current theme object:set_theme- Function to change theme:css_vars- CSS-like variables for styling
Examples
with_theme = HigherOrder.with_theme()
ThemedButton = with_theme.(Button)