Guide
Reference
Roadmap
Guide
Reference
Roadmap

useInfiniteScroll

Tags:
ProUtilities

A React Hook that performs a bottom-detection (accurately detecting when a container has scrolled to the bottom) and invokes a provided callback function, commonly used for implementing simple custom scroll loading logic.

If you need more comprehensive, business-oriented, and highly integrated features, consider checking out useInfiniteList.

Demo

Source
Loading:
false
isLoadDone:
false
Item Count:
0

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const { isLoading, isLoadDone } = useInfiniteScroll(elementTarget, onLoadMore, options)

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

onLoadMore

A function that will be called when the scroll event is triggered.

(previousReturn: R | undefined) => R | Promise<R>

Options

export type UseInfiniteScrollOptions<T extends HTMLElement = HTMLElement> = { /** * distance from the bottom of the scroll container * * @defaultValue 0 */ distance?: number /** * scroll direction * * @defaultValue 'bottom' */ direction?: 'top' | 'bottom' | 'left' | 'right' /** * interval between each scroll event * * @defaultValue 100 */ interval?: number /** * check if can load more */ canLoadMore?: (el: T) => boolean /** * scroll event callback */ onScroll?: (event: Event) => void }

Returns

export type UseInfiniteScrollReturns = { /** * loading state */ isLoading: boolean /** * load done state */ isLoadDone: boolean }