InfiniteScroll
Loads the next page when the end of a list scrolls into view
Category: feedback · WCAG 2.2-AA · feedback, infinite-scroll, pagination, list, scroll, mobile, lazy
States
- idle
- loading
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onLoadMore | () => Promise<unknown> | unknown | — | Called when the sentinel comes into view, or the button is activated; the spinner shows until it settles |
disabled | boolean | false | When true, stops observing and renders nothing — there are no more pages. |
rootMargin | string | '200px' | How far ahead of the end to start loading, as an IntersectionObserver root margin. |
labels | { loadMore?: string; loading?: string } | — | Overrides for the component’s user-visible strings (i18n). |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-text-muted--cascivo-color-border--cascivo-color-surface-2--cascivo-color-foreground--cascivo-radius-md--cascivo-ring-width--cascivo-ring-color--cascivo-text-ui--cascivo-target-min-coarse
When to use
- A long, page-fetched feed or list where the user should keep reading without a page break
- Search or media results that stream in as the user scrolls
- Mobile screens where numbered pagination would be awkward to hit
When not to use
- Content the user needs to navigate back into by position — use Pagination so URLs stay addressable
- Lists with a footer below them, which infinite loading makes unreachable
- A fixed, fully-loaded dataset — render it, or virtualize it, instead of faking pages
How to build an accessible InfiniteScroll in React →
Examples
Basic
Place it as the last child of the scrolling region, after the list.
<InfiniteScroll onLoadMore={loadNextPage} />Stopping at the last page
Renders nothing and stops observing once there is nothing left to load.
<InfiniteScroll onLoadMore={loadNextPage} disabled={!hasMore} />Loading earlier
Starts the next page well before the user reaches the end.
<InfiniteScroll onLoadMore={loadNextPage} rootMargin="600px" />Related components
- Pagination — Addressable, position-stable paging when back-navigation matters
- PullToRefresh — Refreshes the head of the same list the InfiniteScroll extends
- Spinner — Shows the Spinner while the load promise settles