InfiniteScroll

InfiniteScroll watches a sentinel at the bottom of its children with an IntersectionObserver and calls onLoadMore shortly before the user reaches the end, as long as hasMore is true. Set isLoading while a fetch is in flight to suppress duplicate calls, and customize the loader and end nodes. You own and append the data yourself. Use it for feeds, search results, or any paginated API.

Example

Preview

Feed item

import { InfiniteScroll } from '@officina/ui';

function Feed({ items, hasMore, isLoading, loadMore }) {
  return (
    <InfiniteScroll
      hasMore={hasMore}
      isLoading={isLoading}
      onLoadMore={loadMore}
      end="You're all caught up"
    >
      {items.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </InfiniteScroll>
  );
}

API

Prop	Type	Default	Description
children*	ReactNode	—	The already-loaded content.
hasMore*	boolean	—	Whether more items remain to load.
onLoadMore*	() => void	—	Called when the sentinel scrolls into view and more items are available.
className	string	—	Extra classes for the scroll container.
end	ReactNode	—	Node shown once all items are loaded.
isLoading	boolean	—	True while a load is in flight — suppresses duplicate `onLoadMore` calls.
loader	ReactNode	Loading...	Node shown while loading the next page.

Example

API

On this page