Yew Hooks
Hooks for Yew, inspired by streamich/react-use and alibaba/hooks.
Hooks
State
use_toggle- tracks state of counterparts.use_bool_toggle- tracks state of a boolean.use_counter- tracks state of a number.
Lifecycles
use_effect_once- a modified use_effect hook that only runs once.use_mount- calls mount callbacks.use_unmount- calls unmount callbacks.use_is_first_mount- checks if current render is first.use_is_mounted- tracks if component is mounted.
Animations
use_timeout- schedules a timeout to invoke callback.use_interval- schedules an interval to invoke callback.use_update- returns a callback, which re-renders component when called.
Examples
use yew::prelude::*;
use yew_hooks::use_counter;
#[function_component(Counter)]
fn counter() -> Html {
let counter = use_counter(0);
let onincrease = {
let counter = counter.clone();
Callback::from(move |_| counter.increase())
};
let ondecrease = {
let counter = counter.clone();
Callback::from(move |_| counter.decrease())
};
let onincreaseby = {
let counter = counter.clone();
Callback::from(move |_| counter.increase_by(10))
};
let ondecreaseby = {
let counter = counter.clone();
Callback::from(move |_| counter.decrease_by(10))
};
let onset = {
let counter = counter.clone();
Callback::from(move |_| counter.set(100))
};
let onreset = {
let counter = counter.clone();
Callback::from(move |_| counter.reset())
};
html! {
<div>
<button onclick={onincrease}>{ "Increase" }</button>
<button onclick={ondecrease}>{ "Decrease" }</button>
<button onclick={onincreaseby}>{ "Increase by 10" }</button>
<button onclick={ondecreaseby}>{ "Decrease by 10" }</button>
<button onclick={onset}>{ "Set to 100" }</button>
<button onclick={onreset}>{ "Reset" }</button>
<p>
<b>{ "Current value: " }</b>
{ *counter }
</p>
</div>
}
}
12.6k Jan 3, 2023
1.1k Jan 5, 2023
1 Nov 28, 2022
2 Aug 13, 2022
685 Jan 2, 2023
124 Jul 10, 2022
4 Dec 20, 2022
3 Sep 2, 2022
198 Dec 24, 2022
42 Jan 1, 2023
722 Dec 31, 2022
2.2k Dec 31, 2022
17.5k Jan 2, 2023
40 Jun 22, 2022
17.5k Dec 28, 2022
46 Dec 6, 2022
10 Dec 25, 2022
3.3k Jan 1, 2023
26 Dec 17, 2022