Yew Hooks

The use_async hook manages the state of an asynchronous task. It tracks whether the task is currently loading, provides the resulting data (if successful), and captures any error encountered. You can trigger the execution of the async task manually by calling .run() on the returned handle.

use serde::{de::DeserializeOwned, Deserialize, Serialize};
use yew::prelude::*;
use yew_hooks::prelude::*;

#[function_component(UseAsync)]
pub fn async_demo() -> Html {
    // The async block passed to use_async defines the task
    let state = use_async(async move { fetch_repo("jetli/yew-hooks".to_string()).await });

    let onclick = {
        let state = state.clone();
        Callback::from(move |_| {
            // Trigger the task manually
            state.run();
        })
    };

    html! {
        <div>
            <button {onclick} disabled={state.loading}>{ "Start to load repo: jetli/yew-hooks" }</button>
            <p>
                { 
                    if state.loading { 
                        html! { "Loading, wait a sec..." } 
                    } else { 
                        html! {} 
                    } 
                }
            </p>
            {
                if let Some(repo) = &state.data {
                    html! {
                        <>
                            <p>{ "Repo name: " }<b>{ &repo.name }</p>
                            <p>{ "Repo full name: " }<b>{ &repo.full_name }</p>
                            <p>{ "Repo description: " }<b>{ &repo.description }</p>
                            <p>{ "Owner name: " }<b>{ &repo.owner.login }</p>
                            <p>{ "Owner avatar: " }<b><br/><img alt="avatar" src={repo.owner.avatar_url.clone()} /></b/></p>
                        </>
                    }
                } else {
                    html! {}
                }
            }
            <p>
                {
                    if let Some(error) = &state.error {
                        match error {
                            Error::DeserializeError => html! { "DeserializeError" },
                            Error::RequestError => html! { "RequestError" },
                        }
                    } else {
                        html! {}
                    }
                }
            </p>
        </div>
    }
}

The use_counter hook provides a simple way to manage a numeric counter state. It returns a handle that allows you to increment, decrement, set, or reset the value. The handle can be cloned and moved into callbacks.

use yew::prelude::*;
use yew_hooks::prelude::*;

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

The use_websocket hook manages a WebSocket connection. It provides access to the connection's ready_state and a message stream. You can send messages using the .send() method. It is common to use use_effect_with to react to incoming messages from the ws.message field.

use yew::prelude::*;
use yew_hooks::prelude::*;

#[function_component(UseWebSocket)]
pub fn web_socket() -> Html {
    let history = use_list(vec![]);
    let ws = use_websocket("wss://echo.websocket.events/".to_string());

    let onclick = {
        let ws = ws.clone();
        let history = history.clone();
        Callback::from(move |_| {
            let message = "Hello, world!".to_string();
            ws.send(message.clone());
            history.push(format!("[send]: {}", message));
        })
    };

    // Reacting to incoming messages
    {
        let history = history.clone();
        let ws = ws.clone();
        use_effect_with(
            ws.message,
            move |message| {
                if let Some(message) = &**message {
                    history.push(format!("[recv]: {}", message.clone()));
                }
                || ()
            },
        );
    }

    html! {
        <div>
            <p>
                <button {onclick} disabled={*ws.ready_state != UseWebSocketReadyState::Open}>{ "Send" }</button>
            </p>
            <p>
                <b>{ "Message history: " }</b>
            </p>
            {
                for history.current().iter().map(|message| {
                    html! {
                        <p>{ message }</p>
                    }
                })
            }
        </div>
    }
}

Hooks to track browser and element properties:

• use_window_size: tracks Window dimensions.
• use_window_scroll: tracks Window scroll position.
• use_scroll: tracks an HTML element's scroll position.
• use_scrolling: tracks whether HTML element is scrolling.
• use_infinite_scroll: infinite scrolling of the element.
• use_location: tracks browser's location value.
• use_hash: tracks browser's location hash value.
• use_search_param: tracks browser's location search param value.
• use_size: tracks an HTML element's dimensions using the ResizeObserver API.
• use_measure: tracks an HTML element's dimensions using the ResizeObserver API.
• use_geolocation: tracks user's geographic location.
• use_swipe: detects swipe based on TouchEvent.
• use_long_press: detects when a user presses and holds an element for a specified duration.
• use_visible: checks if an element is visible.
• use_hovered: checks if an element is hovered.
• use_permission: tracks browser's permission changes using the Permissions API.
• use_idle: tracks whether the user is idle (not interacting with the page).
• use_start_typing: triggers when user starts typing without an editable element focused.
• use_media_query: tracks if a CSS media query matches (e.g. screen size, dark mode).