diff --git a/README.md b/README.md index e2dd0dee52260a6d5f8b1810c6313eddd8c6f104..ff4d998550e29bb9d868b094a4c6952dfe967439 100644 --- a/README.md +++ b/README.md @@ -88,18 +88,13 @@ Widget's can create their own state and will re-render when that state changes. ```rust #[widget] fn Counter(context: &mut KayakContext) { - let count = context.create_state(0i32).unwrap(); - // Since we move the variable into the closure we need to clone here. - // Similar cost to cloning an Arc - let cloned_count = count.clone(); - let on_event = OnEvent::new(move |context, event| match event.event_type { - EventType::Click => { - cloned_count.set(cloned_count.get() + 1); - } + let (count, set_count) = use_state!(0i32); + let on_event = OnEvent::new(move |_, event| match event.event_type { + EventType::Click => set_count(count + 1), _ => {} }); - let count_text = format!("Current Count: {}", count.get()); + let count_text = format!("Current Count: {}", count); rsx! { <> <Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"Counter Example".to_string()}> diff --git a/examples/counter.rs b/examples/counter.rs index a443d5c5a54d6b1e2eb5d4524975c59750332fb1..8df23d6e9cbce9d3ebd5ad82aa7bf7f1f8792fbe 100644 --- a/examples/counter.rs +++ b/examples/counter.rs @@ -7,7 +7,7 @@ use kayak_ui::bevy::{BevyContext, BevyKayakUIPlugin, FontMapping, UICameraBundle use kayak_ui::core::{ render, rsx, styles::{Style, StyleProp, Units}, - widget, Bound, EventType, Index, MutableBound, OnEvent, + use_state, widget, Bound, EventType, Index, MutableBound, OnEvent, }; use kayak_widgets::{App, Button, Text, Window}; @@ -33,20 +33,16 @@ fn Counter(context: &mut KayakContext) { ..Default::default() }; - let count = context.create_state(0i32).unwrap(); - let cloned_count = count.clone(); + let (count, set_count) = use_state!(0i32); let on_event = OnEvent::new(move |_, event| match event.event_type { - EventType::Click => { - cloned_count.set(cloned_count.get() + 1); - } + EventType::Click => set_count(count + 1), _ => {} }); - let count_value = count.get(); rsx! { <> <Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"Counter Example".to_string()}> - <Text styles={Some(text_styles)} size={32.0} content={format!("Current Count: {}", count_value).to_string()}>{}</Text> + <Text styles={Some(text_styles)} size={32.0} content={format!("Current Count: {}", count).to_string()}>{}</Text> <Button on_event={Some(on_event)}> <Text styles={Some(button_text_styles)} size={24.0} content={"Count!".to_string()}>{}</Text> </Button> diff --git a/kayak_core/src/lib.rs b/kayak_core/src/lib.rs index cee43bbb79bd66cd40f15f6387dc4fa3688511e1..9fa91388bad4df1dfd63eb485b32456372200cd3 100644 --- a/kayak_core/src/lib.rs +++ b/kayak_core/src/lib.rs @@ -26,7 +26,7 @@ pub use event::*; pub use fragment::Fragment; pub use generational_arena::{Arena, Index}; pub use input_event::*; -pub use kayak_render_macros::{constructor, render, rsx, widget}; +pub use kayak_render_macros::{constructor, render, rsx, use_state, widget}; pub use keys::KeyCode; pub use resources::Resources; pub use tree::{Tree, WidgetTree};