Recycling View
A virtualized list component with progressive loading.
Preview
Basic Usage
With Objects
Children Render Pattern
Installation
Usage
RecyclingView efficiently handles large lists by progressively loading items as the user scrolls. It supports two rendering patterns: renderItem prop and children render function.
renderItem
Children render function
How It Works
- Initial Load: Loads the first
itemsPerPageitems - Scroll Detection: Monitors scroll position to detect when user approaches the bottom
- Progressive Loading: Automatically loads more items from the local array when needed
- Infinite Loading: Calls
onReachEndwhen all local items are displayed and the user scrolls further - Prepend Support: Preserves scroll position when items are prepended to the array
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | T[] | - | The full array of items to render |
itemsPerPage | number | 20 | Number of items to load per batch |
renderItem | (item: T, index: number) => ReactNode | - | Render function for each item |
children | (visibleItems: T[]) => ReactNode | - | Alternative render function receiving visible items |
onReachEnd | () => Promise<void> | void | - | Called when all items are displayed and user scrolls to bottom |
className | string | - | CSS class for the scroll area container |
innerClassName | string | - | CSS class for the inner scroll content |