2023-05-19 20:43:03 +01:00
|
|
|
use leptos::*;
|
2023-05-31 05:56:32 +01:00
|
|
|
use leptos_use::docs::{demo_or_body, Note};
|
2023-05-19 20:43:03 +01:00
|
|
|
use leptos_use::use_throttle_fn;
|
|
|
|
|
|
|
|
#[component]
|
|
|
|
fn Demo(cx: Scope) -> impl IntoView {
|
|
|
|
let (click_count, set_click_count) = create_signal(cx, 0);
|
|
|
|
let (throttled_count, set_throttled_count) = create_signal(cx, 0);
|
|
|
|
|
2023-06-21 13:09:00 +02:00
|
|
|
let throttled_fn = use_throttle_fn(move || set_throttled_count.set(throttled_count.get_untracked() + 1), 1000.0);
|
2023-05-19 20:43:03 +01:00
|
|
|
|
|
|
|
view! { cx,
|
|
|
|
<button
|
|
|
|
on:click=move |_| {
|
2023-06-21 13:09:00 +02:00
|
|
|
set_click_count.set(click_count.get_untracked() + 1);
|
2023-05-19 20:43:03 +01:00
|
|
|
throttled_fn();
|
|
|
|
}
|
|
|
|
>
|
|
|
|
"Smash me!"
|
|
|
|
</button>
|
2023-05-31 05:56:32 +01:00
|
|
|
<Note>"Delay is set to 1000ms for this demo."</Note>
|
2023-05-26 18:09:01 +01:00
|
|
|
<p>"Button clicked: " { click_count }</p>
|
2023-05-19 20:43:03 +01:00
|
|
|
<p>"Event handler called: " { throttled_count }</p>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fn main() {
|
|
|
|
_ = console_log::init_with_level(log::Level::Debug);
|
|
|
|
console_error_panic_hook::set_once();
|
|
|
|
|
2023-05-26 18:09:01 +01:00
|
|
|
mount_to(demo_or_body(), |cx| {
|
|
|
|
view! { cx, <Demo /> }
|
2023-05-19 20:43:03 +01:00
|
|
|
})
|
|
|
|
}
|