Vize
infinite-scroll
Load more content when a scroll container reaches an edge.
| Package | @vizejs/composable/infinite-scroll |
| Own the source | vize lib pull composable:infinite-scroll |
| Runtime exports | useInfiniteScroll |
| Gzip budget | 3840 B |
Usage
import { useInfiniteScroll } from "@vizejs/composable/infinite-scroll";
Runtime contract
| Utility | Category | Stability | SSR | Hydration | Cleanup | Targets | Host globals | Uses |
|---|---|---|---|---|---|---|---|---|
useInfiniteScroll |
dom | experimental | deterministic-fallback | stable | reactive-scope | web, desktop | globalThis |
useScroll, tryOnScopeDispose |
API
useInfiniteScroll
Load more content when a scroll container reaches an edge. Built on useScroll: when the configured edge is within distance, onLoadMore runs; concurrent calls are prevented, and after each load the edge is re-measured so short pages keep loading until the container overflows or canLoadMore returns false. Loader errors propagate to the returned promise of the internal run but never leave isLoading stuck. No loading happens during server rendering.
function useInfiniteScroll( target: MaybeRefOrGetter<ScrollTargetValue>, onLoadMore: () => unknown, options: UseInfiniteScrollOptions = {}, ): InfiniteScrollControls
Types
UseInfiniteScrollOptions
Options for useInfiniteScroll.
| Member | Type | Description |
|---|---|---|
distance? |
number |
Distance in CSS pixels from the edge that triggers loading. |
direction? |
InfiniteScrollDirection |
Edge that triggers loading. |
canLoadMore? |
MaybeRefOrGetter<boolean> |
Return false to stop loading (for example once every page is loaded). |
InfiniteScrollControls
Reactive state returned by useInfiniteScroll.
| Member | Type | Description |
|---|---|---|
isLoading |
Readonly<Ref<boolean>> |
Whether onLoadMore is running. |
reset |
() => void |
Re-check the edge and load when it is still within distance (call after the list was replaced). |