Компоненты

VirtualList

Оконный рендер длинного списка: в DOM живёт только видимое.

Оконный рендер длинного списка: в DOM живёт только видимая часть. На десяти тысячах строк обычный map кладёт вкладку — столько узлов браузер не тянет.

Пример

1Событие #1

2Событие #2

3Событие #3

4Событие #4

5Событие #5

10 000 строк разной высоты — в DOM живёт только видимая горстка.

Пропсы

Проп	Тип	По умолчанию	Описание
`items`*	`T[]`	—	Данные списка.
`children`*	`(item, index) => ReactNode`	—	Отрисовка одного элемента.
`itemKey`	`(item, index) => string \| number`	—	Ключ элемента. По умолчанию — индекс.
`estimateSize`	`number \| (index) => number`	`40`	Ожидаемая высота — первое приближение до измерения.
`stickToBottom`	`boolean`	`false`	Прилипать к концу при новых элементах — для логов и чатов.
`overscan`	`number`	`4`	Запас строк за краями окна.
`height`	`number \| string`	`360`	Высота области прокрутки.

items*T[]

Данные списка.

children*(item, index) => ReactNode

Отрисовка одного элемента.

itemKey(item, index) => string | number

Ключ элемента. По умолчанию — индекс.

estimateSizenumber | (index) => number

по умолчанию: 40

Ожидаемая высота — первое приближение до измерения.

stickToBottomboolean

по умолчанию: false

Прилипать к концу при новых элементах — для логов и чатов.

overscannumber

по умолчанию: 4

Запас строк за краями окна.

heightnumber | string

по умолчанию: 360

Высота области прокрутки.

Переменная высота

Хук useVirtual

Компонент — тонкая обёртка над хуком. Для своей разметки берите хук напрямую:

tsx

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