react virtuoso

React Virtuoso-最完整的反应虚拟化渲染列表/表/网格家族的组件。

• 包装箱的可变大小项目；无需手动测量或硬编码项目高度；
• 聊天消息列表UI新；
• 带有粘性标头的分组模式；
• 响应式网格布局；
• 表支持；
• 自动处理内容大小；
• 自定义标题，页脚和空列表组件；
• 固定顶级物品；
• 无尽的滚动，按加载更多；
• 最初的大多数项目索引；
• 滚动到索引方法。

有关实时示例和文档，请查看文档网站。

赞助商

如果您正在使用Virtuoso进行工作，请赞助它。任何捐赠都对项目开发和维护很有帮助。

开始

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，该API使您在加载旧消息，到达旧消息时以及用户提交消息时对滚动位置进行必要的控制。滚动位置可以立即更新，也可以使用平滑的滚动动画进行更新。

分组模式

GroupedVirtuoso组件是“ Flat” Virtuoso的变体，具有以下差异：

• 该组件不是totalCount ，而是公开了groupCounts: number[]属性，该属性指定了每个组中的项目数量。例如，通过[20, 30]将使两组有20个和30个项目；
• 此外， itemContent属性还需要额外的groupContent属性属性，该属性呈现组标头。 groupContent回调将基于零的组索引作为参数。

网格

VirtuosoGrid组件在多列中显示相同大小的项目。布局和项目尺寸通过CSS类属性控制，该属性使您可以使用媒体查询，最小宽度，百分比等。

桌子

TableVirtuoso组件的工作原理就像Virtuoso一样，但带有HTML表。它支持窗口滚动，粘稠的标头，粘性列，并使用React Table和MUI表。

与您选择的UI库合作

您可以根据您的要求将标记自定义 - 检查材料UI列表演示。如果您需要支持重新排序，请检查可排序的事件示例。

文档和演示

有关支持功能和实时演示的深入文档和实时示例，请查看文档网站。

浏览器支持

为了支持Legacy浏览器，您可能必须在使用react-virtuoso之前加载resizeObserver polyfill：

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

作者

Petyo Ivanov @petyosi。

贡献

修复和新功能

要运行测试，请使用npm run test 。 npm run e2e可以运行基于端到端浏览器的测试套件，其中页面为e2e/*.tsx和测试e2e/*.test.ts 。

调试某事的一种方便方法是预览浏览器中的测试用例。为此，运行npm run dev它将启动钢包服务器，该服务器可让您浏览examples文件夹中的组件。

执照

麻省理工学院许可证。