Crate yew_hooks

source · [−]

Expand description

Yew Hooks

Hooks for Yew, inspired by streamich/react-use and alibaba/hooks.

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>
    }
}

Demo

Check out a live demo

Structs

State handle for the use_async hook.

State for an async future.

UseCounterHandle

State handle for the use_counter hook.

State handle for the use_hash hook.

UseLatestHandle

State handle for the use_latest hook.

State handle for the use_list hook.

UseLocalStorageHandle

State handle for the use_local_storage hook.

State handle for the use_map hook.

UseMutLatestHandle

State handle for the use_mut_latest hook.

UsePreviousHandle

State handle for the use_previous hook.

State handle for the use_queue hook.

UseRafStateHandle

State handle for the use_raf_state hook.

UseSessionStorageHandle

State handle for the use_session_storage hook.

State handle for the use_set hook.

UseToggleHandle

State handle for the use_toggle hook.

Functions

This hook returns state and a run callback for an async future.

use_before_unload

A side-effect hook that shows browser alert when user try to reload or close the page.

use_bool_toggle

This hook is a simplified use_toggle to manage boolean toggle state in a function component.

This hook is used to manage counter state in a function component.

use_effect_once

A lifecycle hook that runs an effect only once.

A hook that subscribes a callback to events.

use_event_with_window

A hook that subscribes a callback to events only for window. If you want to specify an event target, use use_event.

A sensor hook that tracks location hash value.

A hook that schedules an interval to invoke callback every millis milliseconds. The interval will be cancelled if millis is set to 0.

use_is_first_mount

A hook returns true if component is just mounted (on first render) and false otherwise.

A hook returns true if component is mounted and false otherwise.

This hook returns the latest immutable ref to state or props.

A hook that tracks a list and provides methods to modify it.

use_local_storage

A side-effect hook that manages a single localStorage key.

A hook that tracks a hash map and provides methods to modify it.

A lifecycle hook that calls a function after the component is mounted.

This hook returns the latest mutable ref to state or props.

This hook returns the previous immutable ref to state or props.

A hook that tracks a queue and provides methods to modify it.

An animation hook that forces component to re-render on each requestAnimationFrame, returns percentage of time elapsed. millis - milliseconds for how long to keep re-rendering component. delay — delay in milliseconds after which to start re-rendering component.

A state hook that only updates state in the callback of requestAnimationFrame.

A sensor hook that tracks an HTML element’s scroll position.

A sensor hook that tracks whether HTML element is scrolling.

use_session_storage

A side-effect hook that manages a single sessionStorage key.

A hook that tracks a hash set and provides methods to modify it.

A hook that schedules a timeout to invoke callback in millis milliseconds from now. The timeout will be cancelled if millis is set to 0.

A side-effect hook that sets title of the page and restore previous title when unmount.

This hook is used to manage toggle state in a function component.

A lifecycle hook that calls a function when the component will unmount.

A hook returns a function that forces component to re-render when called.

use_window_scroll

A sensor hook that tracks Window scroll position.

use_window_size

A sensor hook that tracks dimensions of the browser window.