Merge pull request #949 from pickfire/timeout-count

Add timeout count example

packages/web/Cargo.toml

@@ -92,4 +92,6 @@ dioxus = { workspace = true }
 wasm-bindgen-test = "0.3.29"
 dioxus-ssr = { workspace = true}
 wasm-logger = "0.2.0"
+gloo-timers = "0.2.3"
+gloo-dialogs = "0.1.1"
 dioxus-web = { workspace = true, features = ["hydrate"] }

packages/web/examples/README.md

@@ -0,0 +1,10 @@
+Examples
+========
+
+# Hydrate
+
+- `hydrate` show hydrate
+
+# Async
+
+- `timeout_count` button to add count and show count in the future

packages/web/examples/timeout_count.rs

@@ -0,0 +1,31 @@
+// https://jakelazaroff.com/words/were-react-hooks-a-mistake/
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_web::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let count = use_ref(cx, || 0);
+    let started = use_state(cx, || false);
+
+    let start = move || {
+        if !*started.get() {
+            let count = count.clone(); // clone reference rather than value
+            let alert = move || gloo_dialogs::alert(&format!("Your score was {}!", count.read()));
+            gloo_timers::callback::Timeout::new(5_000, alert).forget();
+        }
+        started.set(true); // this cannot be done inside condition or infinite loop
+    };
+
+    cx.render(rsx! {
+        button {
+            onclick: move |_event| {
+                start();
+                *count.write() += 1;
+            },
+            // format is needed as {count} does not seemed to work in `if` within content
+            if **started { format!("Current score: {}", count.write()) } else { "Start".to_string() }
+        }
+    })
+}