update the dioxus cratesio readme, add many more examples (#5501)

* update the dioxus cratesio readme

* fix example

* fix header

* add a bunch more examples

examples/04-managing-state/custom_hook.rs

@@ -0,0 +1,59 @@
+//! 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)
+}