❯
fn

useInfiniteScroll

v0.0.14testeddemo

Trigger a loader as a scroll container nears one of its edges. Backed by useScroll for RTL-aware arrived-edge detection: the distance is folded into that direction's offset, so onLoadMore fires the moment the edge comes within distance pixels. Re-checks automatically after each load (so an under-filled container keeps loading) and degrades safely under SSR and when IntersectionObserver is unavailable.

Source Tests

Example

ts
const { isLoading } = useInfiniteScroll(el, async () => {
  items.push(...await fetchNextPage());
}, { distance: 10 });

Demo

Loading demo…

Signature

ts
export function useInfiniteScroll<T extends InfiniteScrollElement = InfiniteScrollElement>(
  target: MaybeRefOrGetter<T>,
  onLoadMore: UseInfiniteScrollLoadMore,
  options: UseInfiniteScrollOptions<T> ={ ... }

Type Parameters

Textends InfiniteScrollElement= InfiniteScrollElement

Parameters

ParameterTypeDescription
targetMaybeRefOrGetter<T>Scroll container (element ref, getter, window, or document)
onLoadMoreUseInfiniteScrollLoadMoreCalled near the edge; may return a promise
options?UseInfiniteScrollOptions<T>Options

Returns

UseInfiniteScrollReturn{ isLoading, reset }
PropertyTypeDescription
isLoadingComputedRef<boolean>Whether onLoadMore is currently in flight.
reset() => voidRe-run the edge check on the next tick. Call after appending content if the container is still not full and you want to keep loading.