Infinite Scroll

The InfiniteScroll component provides a reusable pattern for loading paginated data as the user scrolls.

Overview

This component wraps any list of items and automatically triggers loading of the next page when the user scrolls near the bottom. It includes:

• Intersection Observer for efficient scroll detection
• Loading states and error handling
• Keyboard-accessible "Load more" button as fallback
• Support for any data type via render props

Usage

import { InfiniteScroll } from '@krakentech/blueprint-utils/client';

function BillsList() {
    const { 
        data, 
        fetchNextPage, 
        hasNextPage, 
        isFetching, 
        error 
    } = useBills({ accountNumber: 'A-12345', first: 10 });

    return (
        <InfiniteScroll
            data={data}
            error={error}
            hasNextPage={hasNextPage}
            isFetching={isFetching}
            loadFn={fetchNextPage}
            loadMoreText="Load more bills"
            RenderComponent={({ data }) => (
                <ul>
                    {data.map(bill => (
                        <li key={bill.id}>{bill.title}</li>
                    ))}
                </ul>
            )}
        />
    );
}

Props

Prop	Type	Description
data	T[]	The array of items to render
error	Error | null	Any error from fetching
hasNextPage	boolean	Whether more pages are available
isFetching	boolean	Loading state
loadFn	() => void	Function to load next page
loadMoreText	string	Text for the fallback button
RenderComponent	React.FC<{ data: T[] }>	Component to render the items

Accessibility

The component includes a visible "Load more" button that appears briefly when scrolling. This ensures keyboard users can navigate and trigger pagination without relying on scroll events.

Example

And here is an example of this component in action. If you scroll to the bottom, a 'Load more' button is briefly visible. This button is provided to allow for keyboard accessibility. If you open the developer tools for the page, you'll also see the mocked request trigger in the network tab.

View Full Story →