Jonathan Kelley
cd54f5953b
* update the dioxus cratesio readme * fix example * fix header * add a bunch more examples
60 lines
1.9 KiB
Rust
60 lines
1.9 KiB
Rust
//! Writing your own hook.
|
|
//!
|
|
//! A hook is just a function that calls other hooks. By convention it starts with `use_`
|
|
//! and returns whatever state handle the caller needs. Extracting hooks is how you reuse
|
|
//! stateful logic across components — like a counter, a timer, or a data fetcher.
|
|
//!
|
|
//! Hooks rely on being called in the same order every render, so never call them inside
|
|
//! `if`, `match`, or loops.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
// Each call to our custom hook produces an independent counter
|
|
let mut counter_a = use_counter(0);
|
|
let mut counter_b = use_counter(100);
|
|
|
|
// And a more complex hook that exposes multiple actions
|
|
let (name, set_name, reverse) = use_reversible_name("Ada");
|
|
|
|
rsx! {
|
|
h2 { "Two counters from one hook" }
|
|
p { "A: {counter_a}" }
|
|
button { onclick: move |_| counter_a += 1, "Increment A" }
|
|
|
|
p { "B: {counter_b}" }
|
|
button { onclick: move |_| counter_b += 1, "Increment B" }
|
|
|
|
h2 { "Reversible name" }
|
|
input {
|
|
value: "{name}",
|
|
oninput: move |evt| set_name.call(evt.value()),
|
|
}
|
|
button { onclick: move |_| reverse.call(()), "Reverse" }
|
|
p { "Name: {name}" }
|
|
}
|
|
}
|
|
|
|
// A minimal hook — returns a signal initialized with a value
|
|
fn use_counter(initial: i32) -> Signal<i32> {
|
|
use_signal(|| initial)
|
|
}
|
|
|
|
// Hooks can return any combination of signals and callbacks
|
|
fn use_reversible_name(initial: &'static str) -> (Signal<String>, Callback<String>, Callback<()>) {
|
|
let mut name = use_signal(|| initial.to_string());
|
|
|
|
// `use_callback` memoizes a closure so children don't think it changed every render
|
|
let set_name = use_callback(move |value: String| name.set(value));
|
|
let reverse = use_callback(move |_| {
|
|
let reversed = name.read().chars().rev().collect::<String>();
|
|
name.set(reversed);
|
|
});
|
|
|
|
(name, set_name, reverse)
|
|
}
|