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]
|
2023-07-27 18:06:36 +01:00
|
|
|
fn Demo() -> impl IntoView {
|
|
|
|
let (click_count, set_click_count) = create_signal(0);
|
|
|
|
let (throttled_count, set_throttled_count) = create_signal(0);
|
2023-05-19 20:43:03 +01:00
|
|
|
|
2023-07-27 18:06:36 +01: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
|
|
|
|
2023-07-27 18:06:36 +01:00
|
|
|
view! { <button
|
2023-05-19 20:43:03 +01:00
|
|
|
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-07-27 18:06:36 +01:00
|
|
|
mount_to(demo_or_body(), || {
|
|
|
|
view! { <Demo /> }
|
2023-05-19 20:43:03 +01:00
|
|
|
})
|
|
|
|
}
|