Infinite Scroll
A high-performance infinite scroll component that automatically loads more content as users scroll.
Installation
Install the Infinite Scroll component using your preferred package manager.
Usage
The Infinite Scroll component provides seamless content loading as users scroll. It uses the Intersection Observer API for optimal performance and supports various configurations including reverse loading for chat interfaces.
📱 Interactive Demo: Scroll down to see more items load automatically!
Showcase infinite scroll with product catalogs and inventory management.
Perfect for displaying posts, comments, and user-generated content.
Discover Its Features
The Infinite Scroll component is packed with powerful features designed to provide an exceptional user experience.
Automatic Loading
Automatically loads more content when user scrolls near the bottom using Intersection Observer API.
High Performance
Uses efficient Intersection Observer instead of scroll events for better performance and battery life.
Flexible Configuration
Customizable loading triggers, custom loaders, error states, and support for reverse loading.
Mobile Optimized
Touch-friendly scrolling with optimized performance for mobile devices and responsive design.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | T[] | — | Array of items to display |
| hasNextPage* | boolean | — | Whether there are more items to load |
| isLoading* | boolean | — | Whether the component is currently loading |
| onLoadMore* | () => void | Promise<void> | — | Function called when more items should be loaded |
| renderItem* | (item: T, index: number) => React.ReactNode | — | Function to render each item |
| threshold | number | 100 | Distance in pixels from bottom to trigger loading |
| loader | React.ComponentType | DefaultLoader | Custom loading component |
| endMessage | React.ReactNode | Default end message | Message shown when all items are loaded |
| errorMessage | React.ReactNode | undefined | Error message to display when loading fails |
| className | string | '' | Additional CSS classes for the container |
| itemClassName | string | '' | Additional CSS classes for each item wrapper |
| reverse | boolean | false | Whether to load items in reverse order (useful for chat) |
| initialLoad | boolean | false | Whether to automatically load initial data on mount |
| scrollableTarget | string | undefined | ID of custom scroll container element |