Function use_list

pub fn use_list<'hook, T>(
    initial_value: Vec<T>,
) -> impl 'hook + Hook<Output = UseListHandle<T>>
where
    T: 'static + 'hook,

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

Example

use yew_hooks::prelude::*;

#[function_component(UseList)]
fn list() -> Html {
    let list = use_list(vec![1, 2, 3, 4, 5]);
    
    let onset = {
        let list = list.clone();
        Callback::from(move |_| list.set(vec![6, 7, 8, 9, 10]))
    };
    let oninsert = {
        let list = list.clone();
        Callback::from(move |_| list.insert(0, 9))
    };
    let onupdate = {
        let list = list.clone();
        Callback::from(move |_| list.update(0, 4))
    };
    let onremove = {
        let list = list.clone();
        Callback::from(move |_| { let _ = list.remove(0); })
    };
    let onretain = {
        let list = list.clone();
        Callback::from(move |_| list.retain(|x| x % 2 == 0))
    };
    let onclear = {
        let list = list.clone();
        Callback::from(move |_| list.clear())
    };

    html! {
        <div>
            <button onclick={onset}>{ "Set to [6, 7, 8, 9, 10]" }</button>
            <button onclick={oninsert}>{ "Insert 9 at position 0" }</button>
            <button onclick={onupdate}>{ "Update to 4 at position 0" }</button>
            <button onclick={onremove}>{ "Remove position 0" }</button>
            <button onclick={onretain}>{ "Retain even numbers" }</button>
            <button onclick={onclear}>{ "Clear all" }</button>
            <p>
                <b>{ "Current value: " }</b>
                {
                    for list.current().iter().map(|element| {
                        html! { element }
                    })
                }
            </p>
        </div>
    }
}

Note

When used in function components and hooks, this hook is equivalent to:

pub fn use_list<T>(initial_value: Vec<T>) -> UseListHandle<T>
where
    T: 'static,
{
    /* implementation omitted */
}