react virtuoso

React Virtuoso - La liste de composants de rendu de virtualisation REACT Virtualization la plus complète.

• Éléments de taille variable hors de la boîte; Aucune mesure manuelle ou hauteur d'élément de codage dur n'est nécessaire;
• Liste des messages de chat UI Nouveau ;
• Mode groupé avec des en-têtes collants;
• Disposition de grille réactive;
• Prise en charge de la table;
• Gestion automatique du redimensionnement du contenu;
• En-tête personnalisé, pied de page et composants de liste vide;
• Épinglé des éléments supérieurs;
• Défilement sans fin, appuyez pour en charger plus;
• INDEX INDICATIVE INSTALLABLE INDICATIVE;
• Faites défiler la méthode d'index.

Pour les exemples et la documentation en direct, consultez le site Web de documentation.

Sponsors

Si vous utilisez Virtuoso pour le travail, parrainez-le. Tout don contribue beaucoup à le développement et à la maintenance du projet.

Commencer

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

Liste de messages

Le composant Virtuoso Message List est construit spécifiquement pour les conversations humaines / chatbot. En plus du rendu virtualisé, le composant expose une API de gestion des données impérative qui vous donne le contrôle nécessaire sur la position de défilement lorsque les messages plus anciens sont chargés, de nouveaux messages arrivent et lorsque l'utilisateur soumet un message. La position de défilement peut mettre à jour instantanément ou avec une animation de défilement lisse.

Mode groupé

Le composant GroupedVirtuoso est une variante du Virtuoso "plat", avec les différences suivantes:

• Au lieu de totalCount , le composant expose groupCounts: number[] Propriété, qui spécifie la quantité d'éléments dans chaque groupe. Par exemple, le passage [20, 30] rendra deux groupes avec 20 et 30 éléments chacun;
• En outre la propriété itemContent , le composant nécessite une propriété groupContent supplémentaire, qui rend l' en-tête de groupe . Le rappel groupContent reçoit l'indice de groupe basé sur le zéro en tant que paramètre.

Grille

Le composant VirtuosoGrid affiche les mêmes éléments de taille dans plusieurs colonnes. La disposition et le dimensionnement des éléments sont contrôlés via les propriétés de la classe CSS, qui vous permet d'utiliser les requêtes multimédias, la largeur min, le pourcentage, etc.

Tableau

Le composant TableVirtuoso fonctionne comme Virtuoso , mais avec des tables HTML. Il prend en charge le défilement de la fenêtre, les en-têtes collants, les colonnes collantes et fonctionne avec la table React et la table MUI.

Fonctionne avec votre bibliothèque d'interface utilisateur de choix

Vous pouvez personnaliser le balisage de vos exigences - consultez la démo de la liste d'interface utilisateur du matériel. Si vous devez prendre en charge la réorganisation, consultez l'exemple REACT REACT SORTABLE.

Documentation et démos

Pour une documentation approfondie et des exemples en direct des fonctionnalités prises en charge et des démos en direct, consultez le site Web de la documentation.

Support de navigateur

Pour prendre en charge les navigateurs hérités, vous devrez peut-être charger un polyfill de redimensiorobserver avant d'utiliser react-virtuoso :

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

Auteur

PETYO IVANOV @PETYOSI.

Contributif

Correction et nouvelles fonctionnalités

Pour exécuter les tests, utilisez npm run test . Une suite de tests basée sur un navigateur de bout en bout est possible avec npm run e2e , les pages étant e2e/*.tsx et les tests e2e/*.test.ts

Un moyen pratique de déboguer quelque chose est de prévisualiser les cas de test dans le navigateur. Pour ce faire, exécutez npm run dev - il lancera un serveur Ladle qui vous permet de parcourir les composants dans le dossier examples .

Licence

Licence MIT.