VirtualList
Renders only the rows inside the viewport. A 100k-row list costs about as much as a 40-row one.
Component behavior
VirtualList renders rows near the viewport and an overscan margin. Row heights must be fixed or supplied by an index-based function.
Use cases
- Large lists requiring row virtualization.
- Growing log or event streams.
- Lists with fixed or index-derived row heights.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | T[] | — | Array of items to render. |
itemHeight | number | ((index: number) => number) | — | Fixed px height or a per-index function for variable rows. |
renderItem | (item: T, index: number) => ReactNode | — | Render function for each item. |
height | number | string | 320 | Container height in px or any CSS length. |
overscan | number | 6 | Rows rendered beyond each edge to cover fast scrolls. |
getKey | (item: T, index: number) => string | number | — | Stable key per row. Defaults to index. |
onEndReached | () => void | — | Called when the last row enters the viewport. Use to request additional data. |
endThreshold | number | 120 | Px from the bottom that counts as reached. |
emptyState | ReactNode | — | Shown when items is empty. |
className | string | — | Additional CSS class. |
style | CSSProperties | — | Inline style on the viewport element. |
scrollToIndex | number | — | Scrolls this index into view when it changes. |
Examples
import { VirtualList } from "@solarius/onset";