leptos_virtual_scroller

A virtual scroller library for Leptos. Render very large lists efficiently by only rendering the items visible in the viewport.

Installation

Run this command:

cargo add leptos_virtual_scroller

Or add this to your Cargo.toml:

[dependencies]
leptos_virtual_scroller = "0.1.0"

Usage

Here is a basic example of how to use the VirtualScroller.

use std::time::Duration;

use leptos::{prelude::*, task::spawn_local};
use leptos_virtual_scroller::{VirtualGridScroller, VirtualScroller};

use rand::seq::SliceRandom;
use rand::thread_rng;

#[component]
fn App() -> impl IntoView {
    let mut items = vec![];
    for i in 0..1 {
        items.push(format!("hello {}", i));
    }

    let items_sig = RwSignal::new(items);
    let node_ref = NodeRef::new();

    let once = LocalResource::new(move || async move {
        set_timeout(
            move || {
                let mut items = vec![];
                for i in 1..200000 {
                    items.push(format!("hello {}", i));
                }
                items_sig.update(move |i| {
                    i.extend(items);
                    i.shuffle(&mut thread_rng());
                });
            },
            Duration::from_secs(1),
        );
    });
    spawn_local(async move {
        once.await;
    });

    view! {
        <div style="height: 100vh;">
            <VirtualScroller
                node_ref=node_ref
                each=items_sig
                key=move|(_index, item)| {
                    Some(item.clone())
                }
                item_height=30
                header=()
                children=move |(_index, item)| {
                    view! {
                        <div>
                            Item  {item.clone()}
                        </div>
                    }
                }
            />
        </div>
    }
}

fn main() {
    console_error_panic_hook::set_once();
    mount_to_body(move || view! { <App /> })
}