use_infinite_scroll

Demo

source

Usage

use leptos::prelude::*;
use leptos::html::Div;
use leptos_use_infinite_scroll::{use_infinite_scroll_with_options, UseInfiniteScrollOptions};

#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();

let (data, set_data) = signal(vec![1, 2, 3, 4, 5, 6]);

let _ = use_infinite_scroll_with_options(
    el,
    move |_| async move {
        let len = data.with(|d| d.len());
        set_data.update(|data| *data = (1..len+6).collect());
    },
    UseInfiniteScrollOptions::default().distance(10.0),
);

view! {
    <div node_ref=el>
        <For each=move || data.get() key=|i| *i let:item>{ item }</For>
    </div>
}
}

The returned signal is true while new data is being loaded.

Server-Side Rendering

Make sure you follow the instructions in Server-Side Rendering.

On the server-side, use_infinite_scroll will return a signal that is always false. It effectively does nothing on the server, as there are no scroll events to listen to.