react virtuoso

React Virtuoso - Die vollständigste React -Virtualisierungsliste/Tabelle/Gitterfamilie von Komponenten.

• Elemente der variablen Größe nicht aus der Box; Es sind keine manuellen Messungen oder hartkodierenden Elementhöhen erforderlich.
• Chat -Nachrichtenliste UI neu ;
• Gruppierter Modus mit klebrigen Kopfzeilen;
• Responsive Grid -Layout;
• Tischunterstützung;
• Automatische Handhabung von Inhaltsgrößen;
• Benutzerdefinierte Header, Fußzeile und leere Listenkomponenten;
• Top -Elemente festgehalten;
• Endlos Scrollen drücken Sie, um mehr zu laden;
• Anfänglicher oberster Elementindex;
• Scrollen Sie zur Indexmethode.

Live -Beispiele und Dokumentation finden Sie auf der Dokumentations -Website.

Sponsoren

Wenn Sie Virtuoso für die Arbeit verwenden, sponsern Sie es. Jede Spende hilft sehr bei der Projektentwicklung und -wartung.

Fangen an

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' ) ) 

Nachrichtenliste

Die Virtuoso Message List -Komponente ist speziell für Menschen-/Chatbot -Gespräche erstellt. Zusätzlich zum virtualisierten Rendering enthält die Komponente eine imperative Datenverwaltungs -API, die Ihnen die erforderliche Kontrolle über die Bildlaufposition gibt, wenn ältere Nachrichten geladen werden, neue Nachrichten ankommen und wenn der Benutzer eine Nachricht einreicht. Die Bildlaufposition kann sofort oder mit einer reibungslosen Bildlaufanimation aktualisieren.

Gruppierter Modus

Die GroupedVirtuoso -Komponente ist eine Variante des "flachen" Virtuoso mit den folgenden Unterschieden:

• Anstelle von totalCount enthält die Komponente groupCounts: number[] Eigenschaft, die die Anzahl der Elemente in jeder Gruppe angibt. Zum Beispiel wird das Passieren [20, 30] zwei Gruppen mit jeweils 20 und 30 Elementen rendern.
• itemContent hinaus benötigt die Komponente eine zusätzliche groupContent , die den Gruppenheader übernimmt. Der groupContent empfängt den nullbasierten Gruppenindex als Parameter.

Netz

Die VirtuosoGrid Komponente zeigt in mehreren Spaltenelementelemente gleiche Elemente an . Die Layout- und Elementgrößen werden über die Eigenschaften der CSS-Klasse gesteuert, mit der Sie Medienabfragen, Minbreiten, Prozentsatz usw. verwenden können.

Tisch

Die TableVirtuoso -Komponente funktioniert genau wie Virtuoso , jedoch mit HTML -Tabellen. Es unterstützt Fenster Scrolling, klebrige Header, klebrige Säulen und funktioniert mit React -Tabelle und MUI -Tabelle.

Arbeitet mit Ihrer UI -Bibliothek Ihrer Wahl

Sie können das Markup an Ihre Anforderungen anpassen. Überprüfen Sie die Demo der Material UI -Liste. Wenn Sie das Neubestehen unterstützen müssen, überprüfen Sie das React -sortierbare hoc -Beispiel.

Dokumentation und Demos

Ausführliche Dokumentationen und Live-Beispiele für die unterstützten Funktionen und Live-Demos finden Sie auf der Dokumentations-Website.

Browserunterstützung

Um Legacy-Browser zu unterstützen, müssen Sie möglicherweise eine Polyfill von Größen laden, bevor Sie react-virtuoso verwenden:

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

Autor

Petyo ivanov @petyosi.

Beitragen

Korrekturen und neue Funktionen

Verwenden Sie zum Ausführen der Tests npm run test . Eine von End-to-End-browserbasierte Testsuite ist mit npm run e2e ausgelastet, wobei die Seiten e2e/*.tsx und die Tests e2e/*.test.ts sind.

Eine bequeme Möglichkeit, etwas zu debuggen, besteht darin, die Testfälle im Browser voranzutreiben. Um dies zu tun, run npm run dev - startet ein Köpfenserver, auf dem Sie die Komponenten im examples -Ordner durchsuchen können.

Lizenz

MIT -Lizenz.