Components
VirtualList
Windowed rendering of a long list: only what is visible lives in the DOM.
Windowed rendering of a long list: only the visible part lives in the DOM. At ten thousand rows an ordinary map puts the tab on the floor — the browser cannot carry that many nodes.
Example
1Событие #1
2Событие #2
3Событие #3
4Событие #4
5Событие #5
10 000 строк разной высоты — в DOM живёт только видимая горстка.
<VirtualList items={rows} itemKey={(r) => r.id} height={280}>
{(row) => <div className="row">{row.title}</div>}
</VirtualList>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | T[] | — | The list data. |
children* | (item, index) => ReactNode | — | How to render one item. |
itemKey | (item, index) => string | number | — | The item's key. Defaults to the index. |
estimateSize | number | (index) => number | 40 | The expected height — a first approximation until measured. |
stickToBottom | boolean | false | Stick to the end as items arrive — for logs and chats. |
overscan | number | 4 | Spare rows beyond the window's edges. |
height | number | string | 360 | The height of the scroll area. |
items*T[]The list data.
children*(item, index) => ReactNodeHow to render one item.
itemKey(item, index) => string | numberThe item's key. Defaults to the index.
estimateSizenumber | (index) => numberdefaults to: 40
The expected height — a first approximation until measured.
stickToBottombooleandefaults to: false
Stick to the end as items arrive — for logs and chats.
overscannumberdefaults to: 4
Spare rows beyond the window's edges.
heightnumber | stringdefaults to: 360
The height of the scroll area.
Variable heights
The useVirtual hook
The component is a thin wrapper over the hook. For your own markup, take it directly:
import { useVirtual } from "@toimetdev/pathlogs-hooks";
const v = useVirtual({ count: rows.length, estimateSize: 36, stickToBottom: true });
// v.items, v.totalSize, v.scrollRef, v.measure, v.scrollToIndex, v.atBottom