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 es un componente de cuadrícula de datos y editor tabular para React que proporciona una interfaz de hoja de cálculo interactiva. Está diseñado para gestionar datos tabulares con soporte integrado para edición de celdas y navegación por teclado. El proyecto destaca por su flexibilidad en el renderizado y la estructura, permitiendo reemplazar los elementos de tabla estándar con marcado personalizado como listas o divs. Admite el renderizado de celdas personalizado mediante un sistema de mapeo que intercambia las celdas predeterminadas por componentes especializados basados en los metadatos de la celda. El componente cubre amplias capacidades para la gestión de datos tabulares, incluyendo el seguimiento del estado para ediciones, eliminaciones de rangos y pegado de datos. También proporciona controles para el comportamiento de las celdas, como definir el estado de solo lectura y la expansión de columnas.

Glide Data Grid es una cuadrícula de datos virtualizada para React y TypeScript que utiliza la API de HTML Canvas para renderizar millones de celdas con fluidez. Está diseñada como una tabla de datos accesible que mantiene altas tasas de fotogramas al mostrar y navegar por conjuntos de datos masivos. El proyecto se distingue por una arquitectura de renderizado basada en canvas que utiliza renderizado perezoso (lazy rendering) y una API de dibujo personalizada. Esto permite un contenido de celda especializado y un estilo basado en datos que evita los ciclos de actualización estándar del DOM para asegurar un alto rendimiento. La cuadrícula proporciona capacidades integrales de diseño y gestión de datos, incluyendo combinación de celdas, columnas fijas, alturas de fila variables y cálculo automático del ancho de columna. También incluye soporte integrado para edición de celdas, selección de elementos y búsqueda de datos en la cuadrícula.

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 es una biblioteca de JavaScript agnóstica al framework para renderizar cuadrículas de datos interactivas. Permite la visualización de información estructurada en formatos tabulares en diferentes entornos frontend, admitiendo la población de datos desde arrays estáticos o importaciones JSON. La biblioteca cuenta con un sistema de plugins para extender los componentes de la interfaz de usuario y la lógica, así como un pipeline de datos personalizado para transformar la información antes de que se muestre. Incluye soporte integrado para la localización multilingüe para traducir elementos de la interfaz y mensajes. El proyecto cubre capacidades básicas de visualización de datos, incluyendo ordenamiento, filtrado y visualización dinámica de cuadrículas. Proporciona herramientas para gestionar la configuración y la integración con varios entornos de JavaScript.

Esta es una biblioteca de tours guiados y framework de onboarding para aplicaciones React. Proporciona un sistema para crear recorridos interactivos paso a paso utilizando popovers anclados a elementos y herramientas de enmascaramiento visual para resaltar componentes específicos de la interfaz. La biblioteca se centra en la accesibilidad, proporcionando soporte integrado para lectores de pantalla y navegación por teclado para asegurar un onboarding de usuario inclusivo. Permite una amplia personalización al permitir el reemplazo de elementos de interfaz predeterminados, como insignias y botones, por componentes React personalizados. El framework cubre la orquestación de tours mediante la gestión de estado y el targeting de elementos basado en selectores. Incluye capacidades para el desplazamiento automático del viewport, gestión de transiciones de popovers y la capacidad de restringir la interacción del usuario con la interfaz subyacente durante un recorrido.

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 es una biblioteca de JavaScript diseñada para renderizar y gestionar estructuras de datos jerárquicas e interactivas dentro de interfaces web. Proporciona un framework para mostrar información anidada compleja como vistas de árbol o cuadrículas, admitiendo tanto la navegación de árbol estándar como diseños de datos tabulares. La biblioteca se distingue por una arquitectura de plugins modular que permite a los desarrolladores inyectar comportamientos y elementos visuales personalizados en el ciclo de vida del componente. Maneja grandes conjuntos de datos implementando carga perezosa bajo demanda, que obtiene nodos hijos solo cuando es necesario para mantener la capacidad de respuesta. Los usuarios pueden interactuar con los datos a través de reordenamiento de arrastrar y soltar, edición de nodos en línea y selección de múltiples nodos con propagación de estado automática. Más allá del renderizado básico, el proyecto incluye herramientas integrales para la gestión de estado y la manipulación de datos. Admite filtrado de contenido en tiempo real, navegación por teclado y la persistencia de los estados de expansión y selección de nodos a través de sesiones de navegador. La biblioteca está construida sobre un sistema de normalización de datos recursiva y delegación de eventos para garantizar un rendimiento y manejo de interacción consistentes a través de varias configuraciones jerárquicas.

Esta biblioteca es un componente de React diseñado para renderizar cuadrículas de datos de alto rendimiento. Proporciona un framework estructurado para mostrar grandes conjuntos de datos utilizando virtualización de filas basada en ventanas, lo que asegura que solo la porción visible de los datos se renderice en el modelo de objetos del documento (DOM). El componente destaca por capacidades avanzadas de diseño y navegación, incluyendo soporte nativo para encabezados y columnas fijas que permanecen ancladas durante el desplazamiento. Los desarrolladores pueden ejercer control imperativo sobre el viewport de la tabla para navegar a índices o desplazamientos de píxeles específicos, mientras gestionan estados complejos de la cuadrícula como la visibilidad de columnas, la ordenación y la expansión de filas a través de una configuración centralizada. La biblioteca admite una amplia gama de funciones interactivas, incluyendo renderizado de celdas personalizado, fijación de columnas y la capacidad de añadir filas de resumen para datos agregados. Maneja conjuntos de información densos ofreciendo alineación de columnas flexible, control de ancho y truncamiento de texto, permitiendo la creación de tablas interactivas que responden a eventos del usuario como clics y pasadas de ratón.

Este proyecto es un componente de cuadrícula de datos (data grid) de alto rendimiento para React diseñado para renderizar grandes conjuntos de datos dentro de una interfaz estilo hoja de cálculo. Proporciona un framework para mostrar información tabular estructurada mientras permite interacciones complejas basadas en celdas y tareas de gestión de datos. El componente se distingue por su soporte para flujos de trabajo de edición similares a hojas de cálculo, incluyendo navegación impulsada por teclado y la capacidad de inyectar componentes personalizados en celdas individuales. Los usuarios pueden gestionar dinámicamente el diseño de la cuadrícula cambiando el tamaño de las columnas y organizando los encabezados, asegurando que la interfaz se adapte a necesidades específicas de visualización de datos. La cuadrícula incluye capacidades para manejar grandes volúmenes de información a través de renderizado en ventana (windowed rendering) y carga perezosa (lazy loading), que mantienen el rendimiento procesando solo el subconjunto visible de datos. También ofrece control imperativo a través de referencias de componentes, permitiendo la manipulación programática de posiciones de desplazamiento y estados de selección.

🌌 A React toolkit for graph visualization based on G6.

Esta librería es un componente de rejilla de datos de alto rendimiento para aplicaciones React, diseñado para gestionar y mostrar grandes conjuntos de datos. Proporciona un sistema de configuración declarativo que permite a los desarrolladores definir estructuras de tablas, fuentes de datos y conmutadores de funciones a través de un esquema de objetos estructurado. La librería se distingue por un motor de diseño flexible que admite requisitos de interfaz de usuario complejos, como fijar encabezados y columnas específicas a los bordes del viewport durante el desplazamiento. Utiliza renderizado virtualizado para mantener la capacidad de respuesta de la interfaz mostrando solo el subconjunto visible de datos, asegurando un rendimiento consistente independientemente del recuento total de elementos. Más allá de sus capacidades principales de diseño y rendimiento, el proyecto ofrece amplias opciones de personalización. Los desarrolladores pueden inyectar componentes React personalizados para definir la apariencia y el comportamiento de celdas individuales y aplicar estilos visuales a través de variables CSS con alcance, lo que permite una presentación de datos personalizada sin modificar la lógica interna del componente.