react virtuoso

React virtuoso-コンポーネントの最も完全なReact Virtualizationレンダリングリスト/テーブル/グリッドファミリ。

• 箱から出した可変サイズのアイテム。手動測定やハードコーディングアイテムの高さは必要ありません。
• チャットメッセージリストUI新規。
• スティッキーヘッダーを備えたグループ化モード。
• レスポンシブグリッドレイアウト。
• テーブルサポート。
• コンテンツの自動処理サイズのサイズ。
• カスタムヘッダー、フッター、および空のリストコンポーネント。
• ピン留めされたトップアイテム。
• 無限のスクロール、プレスを押してもっとロードします。
• 初期トップのほとんどのアイテムインデックス。
• メソッドインデックスに合わせてスクロールします。

ライブの例とドキュメントについては、ドキュメントWebサイトを確認してください。

スポンサー

あなたが仕事のために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を公開します。スクロール位置は、即座に更新するか、スムーズなスクロールアニメーションを使用して更新できます。

グループ化されたモード

GroupedVirtuosoコンポーネントは、「フラット」なVirtuosoのバリアントであり、次の違いがあります。

• totalCountの代わりに、コンポーネントはgroupCounts: number[]プロパティを公開します。これは、各グループのアイテムの量を指定します。たとえば、 [20, 30]を通過すると、それぞれ20個と30個のアイテムを持つ2つのグループがレンダリングされます。
• さらに、 itemContentプロパティには、グループヘッダーをレンダリングする追加のgroupContentコンテンツプロパティが必要です。 groupContentコールバックは、パラメーターとしてゼロベースのグループインデックスを受信します。

グリッド

VirtuosoGridコンポーネントには、複数の列に同じサイズのアイテムが表示されます。レイアウトとアイテムのサイジングは、CSSクラスのプロパティを通じて制御されます。これにより、メディアクエリ、最小、パーセンテージなどを使用できます。

テーブル

TableVirtuosoコンポーネントは、 Virtuosoと同じように機能しますが、HTMLテーブルを使用します。窓のスクロール、粘着性ヘッダー、粘着性の列をサポートし、ReactテーブルとMUIテーブルで動作します。

選択したUIライブラリで動作します

要件までマークアップをカスタマイズできます - マテリアルUIリストデモを確認してください。並べ替えをサポートする必要がある場合は、React Sortable Hocの例を確認してください。

ドキュメントとデモ

サポートされている機能とライブデモの詳細なドキュメントとライブ例については、ドキュメントWebサイトを確認してください。

ブラウザのサポート

レガシーブラウザをサポートするには、 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フォルダーのコンポーネントを閲覧できるLADLEサーバーが起動します。

ライセンス

MITライセンス。