use_infinite_scroll

Infinite scrolling of the element.

Demo

Usage

use leptos::prelude::*;
use leptos::html::Div;
use leptos_use::{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.

Feature

This function is only available if the crate feature use_infinite_scroll is enabled

Types

• struct UseInfiniteScrollOptions
• struct ScrollState

Source

Source • Demo • Docs