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
}