InfiniteScroll

infinite-scroll

Loads additional content near the viewport boundary with pending and terminal states.

Usage

Automatically load when scrolling to the end

When the bottom sentry enters the viewport, it is adjusted to onLoadMore; the returned Promise will not be triggered repeatedly.

List items 1

List items 2

List items 3

List items 4

List items 5

List items 6

List items 7

List items 8

List items 9

List items 10

List items 11

List items 12

List items 13

List items 14

List items 15

tsx

<InfiniteScroll onLoadMore={loadMore} hasMore={hasMore}>
  {items.map((it) => (
    <Row key={it.id} data={it} />
  ))}
</InfiniteScroll>

Reached the end

When hasMore={false}, stop observing and display the completed copy (can be customized with finishedText).

List items 1

List items 2

List items 3

List items 4

List items 5

——The end——

tsx

<InfiniteScroll onLoadMore={loadMore} hasMore={false} finishedText="——The end——">
  {items.map((it) => (
    <Row key={it.id} data={it} />
  ))}
</InfiniteScroll>

When to use

Use InfiniteScroll to fetch another page as a moderate-sized list approaches its bottom, stopping when hasMore=false. Use VirtualList when rendering all rows would create too many DOM nodes; its onReachEnd can trigger the same pagination logic.

Import

import { InfiniteScroll } from "@hulianui/ui"

Props

Name	Type	Default	Description
hasMore*	`boolean`	—	Whether more data exists; false stops observation and shows the finished content.
threshold	`number`	`100`	Distance in pixels before the bottom that triggers loading through `rootMargin`.
className	`string`	—	Custom class name.

Events

Event	Type	Description
onLoadMore*	`() => Promise<void>\|void`	Loads the next page; a returned Promise prevents repeat triggers while pending.

Slots

Slot	Type	Description
children*	`ReactNode`	Already rendered list content.
loadingText	`ReactNode`	Loading message; the built-in runtime default is `"\u52a0\u8f7d\u4e2d\u2026"` ("Loading...").
finishedText	`ReactNode`	Completion message; the built-in runtime default is `"\u6ca1\u6709\u66f4\u591a\u4e86"` ("No more items").

Pitfalls

Return a Promise from asynchronous onLoadMore work so the pending-state lock can prevent duplicate requests. The sentinel automatically chooses a scrollable ancestor as the IntersectionObserver root; provide a clear overflow-y-auto container or it falls back to viewport observation.

Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable

Usage

Automatically load when scrolling to the end

When the bottom sentry enters the viewport, it is adjusted to onLoadMore; the returned Promise will not be triggered repeatedly.

List items 1

List items 2

List items 3

List items 4

List items 5

List items 6

List items 7

List items 8

List items 9

List items 10

List items 11

List items 12

List items 13

List items 14

List items 15

tsx

<InfiniteScroll onLoadMore={loadMore} hasMore={hasMore}>
  {items.map((it) => (
    <Row key={it.id} data={it} />
  ))}
</InfiniteScroll>

Reached the end

When hasMore={false}, stop observing and display the completed copy (can be customized with finishedText).

List items 1

List items 2

List items 3

List items 4

List items 5

——The end——

tsx

<InfiniteScroll onLoadMore={loadMore} hasMore={false} finishedText="——The end——">
  {items.map((it) => (
    <Row key={it.id} data={it} />
  ))}
</InfiniteScroll>

Name

Type

Default

Description

hasMore*

boolean

—

Whether more data exists; false stops observation and shows the finished content.

threshold

number

100

Distance in pixels before the bottom that triggers loading through rootMargin.

className

string

—

Custom class name.

Event

Type

Description

onLoadMore*

() => Promise<void>|void

Loads the next page; a returned Promise prevents repeat triggers while pending.

Slots

Slot	Type	Description
children*	`ReactNode`	Already rendered list content.
loadingText	`ReactNode`	Loading message; the built-in runtime default is `"\u52a0\u8f7d\u4e2d\u2026"` ("Loading...").
finishedText	`ReactNode`	Completion message; the built-in runtime default is `"\u6ca1\u6709\u66f4\u591a\u4e86"` ("No more items").

InfiniteScroll

Usage

Automatically load when scrolling to the end

Reached the end

When to use

Import

Props

Events

Slots

Pitfalls

Related

InfiniteScroll

Usage

Automatically load when scrolling to the end

Reached the end

When to use

Import

Props

Events

Slots

Pitfalls

Related