# Signal Management Examples ## Overview This document provides practical examples of using the signal management utilities in real-world scenarios. ## Basic Usage Examples ### 1. Simple Button Component ```rust use leptos::prelude::*; use leptos_shadcn_signal_management::*; #[component] fn SimpleButton(children: Children) -> impl IntoView { let button_state = ArcRwSignal::new(ButtonState { loading: false, disabled: false, click_count: 0, }); let button_class = ArcMemo::new(move |_| { let state = button_state.get(); format!("btn {}", if state.loading { "loading" } else { "" }) }); let handle_click = { let button_state = button_state.clone(); move |_| { button_state.update(|state| { state.click_count += 1; state.loading = true; }); // Simulate async operation button_state.update(|state| { state.loading = false; }); } }; view! { } } #[derive(Debug, Clone, PartialEq)] struct ButtonState { loading: bool, disabled: bool, click_count: u32, } ``` ### 2. Form with Validation ```rust use leptos::prelude::*; use leptos_shadcn_signal_management::*; use std::collections::HashMap; #[component] fn ContactForm() -> impl IntoView { let form_state = ArcRwSignal::new(FormState { name: String::new(), email: String::new(), message: String::new(), is_submitting: false, errors: HashMap::new(), }); let validation_state = ArcMemo::new(move |_| { let state = form_state.get(); FormValidationState { is_name_valid: !state.name.is_empty() && state.name.len() >= 2, is_email_valid: state.email.contains('@') && state.email.contains('.'), is_message_valid: !state.message.is_empty() && state.message.len() >= 10, can_submit: !state.name.is_empty() && state.email.contains('@') && !state.message.is_empty() && !state.is_submitting, } }); let handle_submit = { let form_state = form_state.clone(); let validation_state = validation_state.clone(); move |_| { if validation_state.get().can_submit { form_state.update(|state| { state.is_submitting = true; }); // Simulate form submission form_state.update(|state| { state.is_submitting = false; state.name.clear(); state.email.clear(); state.message.clear(); }); } } }; view! {
{move || if !validation_state.get().is_name_valid { view! { "Name must be at least 2 characters" } } else { view! { <> } }}
{move || if !validation_state.get().is_email_valid { view! { "Please enter a valid email" } } else { view! { <> } }}