dioxus-mirror/examples/async.rs

/*
This example shows how to use async and loops to implement a coroutine in a component. Coroutines can be controlled via
the `TaskHandle` object.
*/

use dioxus::prelude::*;
use gloo_timers::future::TimeoutFuture;

#[tokio::main]
async fn main() {
    dioxus::desktop::launch(app);
}

fn app(cx: Scope) -> Element {
    let count = use_state(&cx, || 0);
    let direction = use_state(&cx, || 1);

    let (async_count, dir) = (count.for_async(), *direction);

    let task = use_coroutine(&cx, move || {
        //
        async move {
            loop {
                TimeoutFuture::new(250).await;
                // *async_count.modify() += dir;
            }
        }
    });

    cx.render(rsx! {
        div {
            h1 {"count is {count}"}
            button { onclick: move |_| task.stop(),
                "Stop counting"
            }
            button { onclick: move |_| task.resume(),
                "Start counting"
            }
            button {
                onclick: move |_| {
                    *direction.modify() *= -1;
                    task.restart();
                },
                "Switch counting direcion"
            }
        }
    })
}