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文件夾中的組件。

執照

麻省理工學院許可證。