react virtuoso

React Virtuoso - самый полный список виртуализации React/Таблица/Семейство компонентов таблицы/сетки.

• Элементы переменного размера из коробки; Никаких ручных измерений или жестких высот элемента не требуется;
• Список сообщений чата пользовательский интерфейс новый ;
• Сгруппированный режим с липкими заголовками;
• Отзывчивый сетка сетки;
• Поддержка таблицы;
• Автоматическое обработку контента изменение размера;
• Пользовательский заголовок, нижний колонтитул и пустые компоненты списка;
• Закрепленные верхние предметы;
• Бесконечная прокрутка, нажмите, чтобы загрузить больше;
• Начальный верхний максимальный индекс элементов;
• Прокрутите метод индекса.

Для живых примеров и документации, проверьте веб -сайт документации.

Спонсоры

Если вы используете виртуоз для работы, спонсируйте его. Любое пожертвование очень помогает в разработке и обслуживании проекта.

Начните

npm install react-virtuoso

 import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'

const App = ( ) => {
  return < Virtuoso style = { { height : '400px' } } totalCount = { 200 } itemContent = { index => < div > Item { index } </ div > } />
}

ReactDOM . render ( < App /> , document . getElementById ( 'root' ) ) 

Список сообщений

Компонент списка сообщений Virtuoso построен специально для разговоров человека/чат -ботов. В дополнение к виртуализированному рендерингу, компонент раскрывает императивный API управления данными, который дает вам необходимый контроль над позицией прокрутки при загрузке более старых сообщений, появляются новые сообщения, а когда пользователь представляет сообщение. Положение прокрутки может мгновенно обновляться или с плавной анимацией прокрутки.

Сгруппированный режим

Компонент GroupedVirtuoso - это вариант «плоского» Virtuoso со следующими различиями:

• Вместо totalCount компонент раскрывает свойство groupCounts: number[] , которое указывает количество элементов в каждой группе. Например, прохождение [20, 30] будет представлять две группы с 20 и 30 пунктами в каждом;
• Кроме того, компонент, компонент требует дополнительного groupContent itemContent которое делает заголовок группы . Обратный вызов groupContent получает индекс группы на основе нуля в качестве параметра.

Сетка

VirtuosoGrid компонент отображает элементы одинакового размера в нескольких столбцах. Макет и размер предметов контролируются с помощью свойств класса CSS, которые позволяют использовать медиа-запросы, минимальную ширину, процент и т. Д.

Стол

Компонент TableVirtuoso работает так же, как Virtuoso , но с HTML -таблицами. Он поддерживает прокрутку окон, липкие заголовки, липкие колонны и работает с таблицей реагирования и таблицей MUI.

Работает с выбранной библиотекой пользовательского интерфейса

Вы можете настроить разметку до ваших требований - проверить демонстрацию списка пользовательского интерфейса. Если вам нужно поддерживать переупорядочение, проверьте пример сортируемого HOC React.

Документация и демонстрации

Для подробной документации и живых примеров поддерживаемых функций и живых демонстраций, проверьте веб-сайт документации.

Поддержка браузера

Чтобы поддержать Legacy Browsers, вам, возможно, придется загрузить полифилл ResizeObserver, прежде чем использовать react-virtuoso :

 import ResizeObserver from 'resize-observer-polyfill'
if (!window.ResizeObserver)
  window.ResizeObserver = ResizeObserver

Автор

Петё Иванов @pethyosi.

Внося

Исправления и новые функции

Чтобы запустить тесты, используйте npm run test . Тестовый набор для браузера на основе браузера запускается с помощью npm run e2e , причем страницы представляют собой e2e/*.tsx и тесты e2e/*.test.ts

Удобный способ отладки чего -то - предварительно просмотреть тестовые примеры в браузере. Для этого запустите npm run dev - он запустит сервер Ladle, который позволит вам просматривать компоненты в папке examples .

Лицензия

MIT Лицензия.