2023-06-10 00:57:35 +01:00
|
|
|
use leptos::*;
|
|
|
|
use leptos_use::docs::{demo_or_body, Note};
|
|
|
|
use leptos_use::storage::use_storage;
|
|
|
|
use serde::{Deserialize, Serialize};
|
|
|
|
|
|
|
|
#[derive(Serialize, Deserialize, Clone, Debug)]
|
|
|
|
pub struct BananaState {
|
|
|
|
pub name: String,
|
|
|
|
pub color: String,
|
|
|
|
pub size: String,
|
|
|
|
pub count: u32,
|
|
|
|
}
|
|
|
|
|
|
|
|
#[component]
|
2023-07-27 18:06:36 +01:00
|
|
|
fn Demo() -> impl IntoView {
|
2023-06-10 00:57:35 +01:00
|
|
|
let the_default = BananaState {
|
|
|
|
name: "Banana".to_string(),
|
|
|
|
color: "Yellow".to_string(),
|
|
|
|
size: "Medium".to_string(),
|
|
|
|
count: 0,
|
|
|
|
};
|
|
|
|
|
2023-07-27 18:06:36 +01:00
|
|
|
let (state, set_state, _) = use_storage("banana-state", the_default.clone());
|
2023-06-10 00:57:35 +01:00
|
|
|
|
2023-07-27 18:06:36 +01:00
|
|
|
let (state2, ..) = use_storage("banana-state", the_default.clone());
|
2023-06-10 00:57:35 +01:00
|
|
|
|
2023-07-27 19:48:21 +01:00
|
|
|
view! {
|
|
|
|
<input
|
2023-06-10 00:57:35 +01:00
|
|
|
class="block"
|
2023-06-21 13:09:00 +02:00
|
|
|
prop:value=move || state.get().name
|
2023-06-10 00:57:35 +01:00
|
|
|
on:input=move |e| set_state.update(|s| s.name = event_target_value(&e))
|
|
|
|
type="text"
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
class="block"
|
2023-06-21 13:09:00 +02:00
|
|
|
prop:value=move || state.get().color
|
2023-06-10 00:57:35 +01:00
|
|
|
on:input=move |e| set_state.update(|s| s.color = event_target_value(&e))
|
|
|
|
type="text"
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
class="block"
|
2023-06-21 13:09:00 +02:00
|
|
|
prop:value=move || state.get().size
|
2023-06-10 00:57:35 +01:00
|
|
|
on:input=move |e| set_state.update(|s| s.size = event_target_value(&e))
|
|
|
|
type="text"
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
class="block"
|
2023-06-21 13:09:00 +02:00
|
|
|
prop:value=move || state.get().count
|
|
|
|
value=move || state.get().count
|
2023-07-27 19:48:21 +01:00
|
|
|
on:input=move |e| {
|
|
|
|
set_state
|
|
|
|
.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32)
|
|
|
|
}
|
2023-09-30 18:24:06 +01:00
|
|
|
|
2023-06-10 00:57:35 +01:00
|
|
|
type="number"
|
|
|
|
min="0"
|
|
|
|
step="1"
|
|
|
|
max="1000"
|
|
|
|
/>
|
|
|
|
|
2023-07-27 19:48:21 +01:00
|
|
|
<p>
|
|
|
|
"Second " <b>
|
|
|
|
<code>"use_storage"</code>
|
|
|
|
</b> ":"
|
|
|
|
</p>
|
2023-06-10 00:57:35 +01:00
|
|
|
|
2023-07-27 19:48:21 +01:00
|
|
|
<pre>{move || format!("{:#?}", state2.get())}</pre>
|
2023-06-10 00:57:35 +01:00
|
|
|
|
2023-07-27 19:48:21 +01:00
|
|
|
<Note>
|
|
|
|
"The values are persistent. When you reload the page the values will be the same."
|
|
|
|
</Note>
|
2023-06-10 00:57:35 +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-10 00:57:35 +01:00
|
|
|
})
|
|
|
|
}
|