WorldSEnder / yew-virtualized

A yew component that renders only the on-screen part of a scrollable list

yew-virtualized

A VirtualList yew component that renders only the visible part of a scrollable list.

This component uses the ResizeObserver API to allow dynamically sized items in the list.

Quick Example

use yew_virtualized::VirtualList;

fn items(idx: usize) -> Html {
    html! { format!("Item #{idx}") }
}

#[function_component(App)]
fn app() -> Html {
    html! {
        <VirtualList
            // An approximate item height that will be used to guess
            // space usage before the first render of an item. Subsequent renders
            // use the exact item height
            height_prior={30}
            // How many items to render, in total.
            item_count={100}
            // Callback function to render individual items by index in 0..item_count
            items={VirtualList::item_gen(items)}
            // Additional classes to apply to the root node
            classes={"scrollbar"} />
    }
}