diff --git a/packages/web/Cargo.toml b/packages/web/Cargo.toml index 7adfbf13a..12184644c 100644 --- a/packages/web/Cargo.toml +++ b/packages/web/Cargo.toml @@ -89,3 +89,5 @@ wasm-bindgen-test = "0.3.29" dioxus-ssr = { path = "../ssr", version = "0.3.0"} wasm-logger = "0.2.0" dioxus-web = { path = ".", features = ["hydrate"] } +gloo-timers = "0.2.3" +gloo-dialogs = "0.1.1" diff --git a/packages/web/examples/README.md b/packages/web/examples/README.md new file mode 100644 index 000000000..faa322df3 --- /dev/null +++ b/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 diff --git a/packages/web/examples/timeout_count.rs b/packages/web/examples/timeout_count.rs new file mode 100644 index 000000000..742e6a49e --- /dev/null +++ b/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() } + } + }) +}