mirror of
https://github.com/adoyle0/leptos-use.git
synced 2025-03-13 01:09:48 -04:00
Update use_storage example for new API
This commit is contained in:
parent
3ecaade851
commit
c62adedcf2
1 changed files with 22 additions and 18 deletions
|
@ -1,28 +1,31 @@
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use leptos_use::docs::{demo_or_body, Note};
|
use leptos_use::docs::{demo_or_body, Note};
|
||||||
use leptos_use::storage::use_storage;
|
use leptos_use::storage::{use_local_storage, JsonCodec};
|
||||||
use serde::{Deserialize, Serialize};
|
use serde::{Deserialize, Serialize};
|
||||||
|
|
||||||
#[derive(Serialize, Deserialize, Clone, Debug)]
|
#[derive(Serialize, Deserialize, Clone, Debug, PartialEq)]
|
||||||
pub struct BananaState {
|
pub struct BananaState {
|
||||||
pub name: String,
|
pub name: String,
|
||||||
pub color: String,
|
pub wearing: String,
|
||||||
pub size: String,
|
pub descending: String,
|
||||||
pub count: u32,
|
pub count: u32,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
impl Default for BananaState {
|
||||||
|
fn default() -> Self {
|
||||||
|
Self {
|
||||||
|
name: "Bananas".to_string(),
|
||||||
|
wearing: "pyjamas".to_string(),
|
||||||
|
descending: "stairs".to_string(),
|
||||||
|
count: 2,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
fn Demo() -> impl IntoView {
|
fn Demo() -> impl IntoView {
|
||||||
let the_default = BananaState {
|
let (state, set_state, reset) = use_local_storage::<BananaState, JsonCodec>("banana-state");
|
||||||
name: "Banana".to_string(),
|
let (state2, _, _) = use_local_storage::<BananaState, JsonCodec>("banana-state");
|
||||||
color: "Yellow".to_string(),
|
|
||||||
size: "Medium".to_string(),
|
|
||||||
count: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
let (state, set_state, _) = use_storage("banana-state", the_default.clone());
|
|
||||||
|
|
||||||
let (state2, ..) = use_storage("banana-state", the_default.clone());
|
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<input
|
<input
|
||||||
|
@ -33,14 +36,14 @@ fn Demo() -> impl IntoView {
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
class="block"
|
class="block"
|
||||||
prop:value=move || state.get().color
|
prop:value=move || state.get().wearing
|
||||||
on:input=move |e| set_state.update(|s| s.color = event_target_value(&e))
|
on:input=move |e| set_state.update(|s| s.wearing = event_target_value(&e))
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
class="block"
|
class="block"
|
||||||
prop:value=move || state.get().size
|
prop:value=move || state.get().descending
|
||||||
on:input=move |e| set_state.update(|s| s.size = event_target_value(&e))
|
on:input=move |e| set_state.update(|s| s.descending = event_target_value(&e))
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
|
@ -57,6 +60,7 @@ fn Demo() -> impl IntoView {
|
||||||
step="1"
|
step="1"
|
||||||
max="1000"
|
max="1000"
|
||||||
/>
|
/>
|
||||||
|
<button on:click=move |_| reset()>"Delete from storage"</button>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
"Second " <b>
|
"Second " <b>
|
||||||
|
|
Loading…
Add table
Reference in a new issue