2023-06-08 23:52:14 +01:00
|
|
|
use leptos::*;
|
|
|
|
use leptos_use::docs::{demo_or_body, Note};
|
|
|
|
use leptos_use::watch_throttled;
|
|
|
|
|
|
|
|
#[component]
|
2023-07-27 18:06:36 +01:00
|
|
|
fn Demo() -> impl IntoView {
|
|
|
|
let (input, set_input) = create_signal("".to_string());
|
|
|
|
let (updated, set_updated) = create_signal(0);
|
2023-06-08 23:52:14 +01:00
|
|
|
|
|
|
|
let _ = watch_throttled(
|
2023-06-21 13:09:00 +02:00
|
|
|
move || input.get(),
|
2023-06-08 23:52:14 +01:00
|
|
|
move |_, _, _| {
|
|
|
|
set_updated.update(|x| *x += 1);
|
|
|
|
},
|
|
|
|
1000.0,
|
|
|
|
);
|
|
|
|
|
2023-07-27 19:48:21 +01:00
|
|
|
view! {
|
|
|
|
<input
|
2023-06-08 23:52:14 +01:00
|
|
|
class="block"
|
2023-06-21 13:09:00 +02:00
|
|
|
prop:value=move || input.get()
|
|
|
|
on:input=move |e| set_input.set(event_target_value(&e))
|
2023-06-08 23:52:14 +01:00
|
|
|
placeholder="Try to type anything..."
|
|
|
|
type="text"
|
|
|
|
/>
|
|
|
|
<Note>
|
|
|
|
<code>"ms"</code>
|
|
|
|
" is set to 1000ms for this demo."
|
|
|
|
</Note>
|
2023-07-27 19:48:21 +01:00
|
|
|
<p>"Input: " {input}</p>
|
|
|
|
<p>"Times Updated: " {updated}</p>
|
2023-06-08 23:52:14 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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(), || {
|
2023-07-27 19:48:21 +01:00
|
|
|
view! { <Demo/> }
|
2023-06-08 23:52:14 +01:00
|
|
|
})
|
|
|
|
}
|