useInfiniteScroll

v0.0.15testeddemo

Trigger a loader as a scroll container nears one of its edges. Backed by {@link 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

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

Demo

Loading demo…

Signature

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

Type Parameters

Textends InfiniteScrollElement= InfiniteScrollElement

Parameters

Parameter	Type	Default	Description
`target`	`MaybeRefOrGetter<T>`	—	Scroll container (element ref, getter, window, or document)
`onLoadMore`	`UseInfiniteScrollLoadMore`	—	Called near the edge; may return a promise
`options`?	`UseInfiniteScrollOptions<T>`	`{}`	Options

Returns

UseInfiniteScrollReturn`{ isLoading, reset }`