Awesome GitHub RepositoriesReact Components

This project is a declarative data visualization library that provides a composable suite of user interface components for rendering interactive charts. It functions as an SVG-based charting engine, allowing developers to construct complex visualizations by nesting modular building blocks such as axes, grids, legends, and data series within a unified layout. The library distinguishes itself through a highly responsive architecture that automatically reconciles layout changes and maps data domains to pixel coordinates using mathematical scale functions. It prioritizes performance through memoi

Nivo is a responsive charting framework and a React data visualization library that uses D3 for its underlying math logic. It serves as both a collection of interactive chart components for web applications and a server-side visualization engine for generating static data chart images. The project distinguishes itself by providing a containerized chart rendering API, allowing the visualization engine to be deployed via Docker to serve rendered graphics as images or files through a programmatic interface. It also features a motion engine for animated data transitions, ensuring smooth visual sh

React DevTools is a set of web browser developer tools integrated into Chrome and Firefox. It functions as a component inspector and UI debugger designed to visualize the component hierarchy and analyze the runtime behavior of React applications. The project includes a performance profiler used to detect unnecessary component re-renders and improve rendering efficiency. It also provides utilities for mapping virtual component trees to the physical DOM and linking rendered UI elements directly to their corresponding source code files and line numbers. The toolset covers component hierarchy vi

react-vis is a declarative, component-based React data visualization library. It provides a framework of reusable building blocks for rendering interactive charts and graphs by mapping raw data to visual attributes such as position, color, and size. The system leverages D3 for its scaling and layout logic. The library is distinguished by its ability to handle complex data relationships, including hierarchical data via tree maps and circle packing, as well as multidimensional analysis using parallel axes and radar charts. It also supports network flow mapping to illustrate the volume and direc

F2 is a cross-platform charting engine and grammar-based visualization tool designed to render interactive data visualizations. It functions as a declarative system that allows users to build complex charts by defining the relationships between data dimensions and visual encoding channels. The framework is specifically optimized for mobile data visualization, providing a toolkit for creating touch-optimized charts. It supports custom data visualization styling, enabling the use of personalized shapes and animations to define a unique visual identity. The engine provides a platform-agnostic r

Penrose is a compiler that transforms structured mathematical notation into optimized SVG diagrams. It uses a three-stage pipeline of separate domain, substance, and style files to define mathematical objects, relationships, and visual presentation, then solves continuous optimization problems with user-defined spatial constraints and objectives to automatically arrange diagram elements. The system separates diagram content from visual style using distinct declarative languages, and provides a typed domain language with subtype hierarchies for mathematical objects. It supports embedding compi

BizCharts is a React charting library that wraps the G2 grammar of graphics, providing declarative React components for building interactive data visualizations. It bridges G2's imperative charting API with React's declarative component model, enabling chart creation through nested component composition without writing imperative code. The library distinguishes itself by mapping G2's grammar of graphics primitives directly to React component types, allowing chart series like line, bar, and scatter to be expressed as interchangeable React components. It synchronizes G2 chart instance creation,

Regulex is a tool that parses regular expressions into interactive syntax diagrams, rendering them directly on an HTML canvas. It converts a regex string into an abstract syntax tree and visualizes the structure as a navigable diagram, making the internal logic of a regular expression visually accessible. Beyond basic visualization, Regulex provides syntax validation that detects and reports precise errors, including invalid back references and octal escapes. It also offers a state-machine visualization mode that maps regex AST nodes to NFA-like states and transitions, rendered as a directed

MUI X is a collection of advanced React UI components for building data-rich applications, including a data grid, charting library, date and time pickers, scheduler, and tree view. The library is built with accessibility as a core principle, ensuring all components meet WCAG and WAI-ARIA standards for keyboard navigation and screen reader announcements. The components are designed for extensibility and performance. The data grid offers comprehensive data management with sorting, filtering, pagination, column pinning, row grouping, inline editing, and Excel export. The charting library support

react-datasheet est un composant de grille de données et éditeur tabulaire pour React qui fournit une interface de feuille de calcul interactive. Il est conçu pour gérer des données tabulaires avec un support intégré pour l'édition de cellules et la navigation au clavier. Le projet se distingue par sa flexibilité dans le rendu et la structure, permettant le remplacement des éléments de table standard par du balisage personnalisé comme des listes ou des divs. Il supporte le rendu de cellules personnalisé via un système de mapping qui échange les cellules par défaut avec des composants spécialisés basés sur les métadonnées de la cellule. Le composant couvre de larges capacités pour la gestion de données tabulaires, incluant le suivi d'état pour les modifications, les suppressions de plages et le collage de données. Il fournit également des contrôles pour le comportement des cellules, comme la définition du statut en lecture seule et la fusion de colonnes.

Glide Data Grid est une grille de données virtualisée pour React et TypeScript qui utilise l'API HTML Canvas pour afficher des millions de cellules de manière fluide. Il est conçu comme une table de données accessible qui maintient des fréquences d'images élevées lors de l'affichage et de la navigation dans des jeux de données massifs. Le projet se distingue par une architecture de rendu basée sur le canvas qui utilise le rendu différé (lazy rendering) et une API de dessin personnalisée. Cela permet un contenu de cellule spécialisé et un stylisme piloté par les données qui contourne les cycles de mise à jour DOM standard pour garantir une haute performance. La grille fournit des capacités complètes de mise en page et de gestion de données, incluant la fusion de cellules, les colonnes figées, les hauteurs de ligne variables et le calcul automatique de la largeur des colonnes. Elle inclut également un support intégré pour l'édition de cellules, la sélection d'éléments et la recherche dans les données de la grille.

gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve

Grid.js est une bibliothèque JavaScript agnostique aux frameworks pour le rendu de grilles de données interactives. Elle permet l'affichage d'informations structurées sous forme tabulaire dans différents environnements frontend, prenant en charge le peuplement des données à partir de tableaux statiques ou d'importations JSON. La bibliothèque dispose d'un système de plugins pour étendre les composants et la logique de l'interface utilisateur, ainsi qu'un pipeline de données personnalisé pour transformer les informations avant leur affichage. Elle inclut un support intégré pour la localisation multilingue afin de traduire les éléments d'interface et les messages. Le projet couvre les capacités fondamentales de visualisation de données, notamment le tri, le filtrage et la visualisation dynamique de grilles. Il fournit des outils pour gérer les paramètres de configuration et s'intégrer avec divers environnements JavaScript.

Il s'agit d'une bibliothèque de visite guidée et d'un framework d'onboarding pour les applications React. Il fournit un système pour créer des visites interactives étape par étape en utilisant des popovers ancrés aux éléments et des outils de masquage visuel pour mettre en évidence des composants d'interface spécifiques. La bibliothèque se concentre sur l'accessibilité, fournissant un support intégré pour les lecteurs d'écran et la navigation au clavier afin d'assurer un onboarding utilisateur inclusif. Elle permet une personnalisation étendue en permettant le remplacement des éléments d'interface par défaut, tels que les badges et les boutons, par des composants React personnalisés. Le framework couvre l'orchestration de la visite via la gestion d'état et le ciblage d'éléments basé sur des sélecteurs. Il inclut des capacités pour le défilement automatique de la fenêtre, la gestion des transitions de popover et la capacité de restreindre l'interaction de l'utilisateur avec l'interface sous-jacente pendant une visite.

Vue-easytable is a high-performance data grid component designed for the Vue.js framework. It provides a comprehensive interface for displaying and managing large-scale tabular data, utilizing virtual scrolling to maintain responsiveness by rendering only the visible subset of rows within the browser. The component offers spreadsheet-style interaction, enabling users to perform direct, in-place data editing and manipulation. It supports complex grid configurations, including column pinning, row expansion, and data filtering, allowing for the organization of structured information to improve r

Fancytree est une bibliothèque JavaScript conçue pour rendre et gérer des structures de données hiérarchiques interactives au sein d'interfaces web. Elle fournit un framework pour afficher des informations imbriquées complexes sous forme d'arborescences ou de grilles, prenant en charge à la fois la navigation standard dans l'arborescence et les mises en page de données tabulaires. La bibliothèque se distingue par une architecture de plugin modulaire qui permet aux développeurs d'injecter des comportements et des éléments visuels personnalisés dans le cycle de vie du composant. Elle gère les grands ensembles de données en implémentant un chargement paresseux à la demande, qui récupère les nœuds enfants uniquement lorsque nécessaire pour maintenir la réactivité. Les utilisateurs peuvent interagir avec les données via le glisser-déposer, l'édition de nœuds en ligne et la sélection multi-nœuds avec propagation automatique de l'état. Au-delà du rendu de base, le projet inclut des outils complets pour la gestion d'état et la manipulation de données. Il prend en charge le filtrage de contenu en temps réel, la navigation au clavier et la persistance des états d'expansion et de sélection des nœuds à travers les sessions de navigateur. La bibliothèque est construite sur un système de normalisation récursive des données et de délégation d'événements pour garantir des performances et une gestion des interactions cohérentes à travers diverses configurations hiérarchiques.

Cette bibliothèque est un composant React conçu pour le rendu de grilles de données haute performance. Elle fournit un framework structuré pour afficher de grands jeux de données en utilisant la virtualisation des lignes basée sur la fenêtre, ce qui garantit que seule la portion visible des données est rendue dans le modèle objet du document (DOM). Le composant se distingue par des capacités avancées de mise en page et de navigation, incluant la prise en charge native des en-têtes et colonnes fixes qui restent ancrés pendant le défilement. Les développeurs peuvent exercer un contrôle impératif sur la fenêtre d'affichage de la table pour naviguer vers des indices ou des décalages de pixels spécifiques, tout en gérant des états de grille complexes tels que la visibilité des colonnes, le tri et l'expansion des lignes via une configuration centralisée. La bibliothèque prend en charge un large éventail de fonctionnalités interactives, incluant le rendu de cellules personnalisé, l'épinglage de colonnes et la possibilité d'ajouter des lignes de résumé pour les données agrégées. Elle gère les jeux d'informations denses en offrant un alignement de colonne flexible, un contrôle de largeur et une troncature de texte, permettant la création de tables interactives qui répondent aux événements utilisateur comme les clics et les survol de souris.

Ce projet est un composant de grille de données haute performance pour React, conçu pour rendre de grands jeux de données au sein d'une interface de type tableur. Il fournit un framework pour afficher des informations tabulaires structurées tout en permettant des interactions complexes basées sur les cellules et des tâches de gestion de données. Le composant se distingue par sa prise en charge des flux de travail d'édition de type tableur, incluant la navigation au clavier et la possibilité d'injecter des composants personnalisés dans des cellules individuelles. Les utilisateurs peuvent gérer dynamiquement la mise en page de la grille en redimensionnant les colonnes et en organisant les en-têtes, garantissant que l'interface s'adapte aux besoins spécifiques de visualisation de données. La grille inclut des capacités pour gérer de grands volumes d'informations via le rendu fenêtré et le chargement paresseux (lazy loading), qui maintiennent les performances en ne traitant que le sous-ensemble visible de données. Elle offre également un contrôle impératif via des références de composants, permettant la manipulation programmatique des positions de défilement et des états de sélection.

🌌 A React toolkit for graph visualization based on G6.

Cette bibliothèque est un composant de grille de données haute performance pour les applications React, conçu pour gérer et afficher de grands jeux de données. Elle fournit un système de configuration déclaratif qui permet aux développeurs de définir des structures de tableaux, des sources de données et des bascules de fonctionnalités via un schéma d'objet structuré. La bibliothèque se distingue par un moteur de mise en page flexible qui prend en charge des exigences d'interface utilisateur complexes, telles que l'épinglage des en-têtes et de colonnes spécifiques aux bords de la fenêtre d'affichage lors du défilement. Elle utilise un rendu virtualisé pour maintenir la réactivité de l'interface en affichant uniquement le sous-ensemble visible de données, garantissant des performances cohérentes quel que soit le nombre total d'éléments. Au-delà de ses capacités de mise en page et de performance de base, le projet offre des options de personnalisation étendues. Les développeurs peuvent injecter des composants React personnalisés pour définir l'apparence et le comportement des cellules individuelles et appliquer des styles visuels via des variables CSS à portée, permettant une présentation de données sur mesure sans modifier la logique interne des composants.