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 este o componentă de tip grid de date și editor tabelar pentru React, care oferă o interfață interactivă de tip foaie de calcul. Este concepută pentru gestionarea datelor tabelare cu suport integrat pentru editarea celulelor și navigarea prin tastatură. Proiectul se distinge prin flexibilitatea în randare și structură, permițând înlocuirea elementelor standard de tabel cu markup personalizat, cum ar fi liste sau div-uri. Suportă randarea personalizată a celulelor printr-un sistem de mapare care înlocuiește celulele implicite cu componente specializate bazate pe metadatele celulei. Componenta acoperă capabilități largi pentru gestionarea datelor tabelare, inclusiv urmărirea stării pentru editări, ștergeri de intervale și lipirea datelor. Oferă, de asemenea, controale pentru comportamentul celulelor, cum ar fi definirea stării read-only și column spanning.

Glide Data Grid este o grilă de date virtualizată pentru React și TypeScript care utilizează HTML Canvas API pentru a reda milioane de celule fluid. Este concepută ca un tabel de date accesibil care menține rate de cadre ridicate la afișarea și navigarea prin seturi masive de date. Proiectul se distinge printr-o arhitectură de randare bazată pe canvas care utilizează randarea leneșă (lazy rendering) și un API de desenare personalizat. Acest lucru permite conținutul celulelor specializat și stilizarea bazată pe date, care ocolește ciclurile standard de actualizare DOM pentru a asigura performanțe ridicate. Grila oferă capabilități cuprinzătoare de layout și gestionare a datelor, inclusiv îmbinarea celulelor, coloane înghețate, înălțimi variabile ale rândurilor și calculul automat al lățimii coloanelor. Include, de asemenea, suport integrat pentru editarea celulelor, selecția elementelor și căutarea în datele grilei.

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 este o bibliotecă JavaScript agnostică față de framework, pentru randarea grilelor de date interactive. Aceasta permite afișarea informațiilor structurate în formate tabelare în diferite medii frontend, suportând popularea datelor din array-uri statice sau importuri JSON. Biblioteca dispune de un sistem de plugin-uri pentru extinderea componentelor interfeței utilizator și a logicii, precum și un pipeline de date personalizat pentru transformarea informațiilor înainte ca acestea să fie afișate. Include suport nativ pentru localizarea multilingvă, pentru a traduce elementele interfeței și mesajele. Proiectul acoperă capabilități de bază de vizualizare a datelor, inclusiv sortarea, filtrarea și vizualizarea dinamică a grilei. Oferă instrumente pentru gestionarea setărilor de configurare și integrarea cu diverse medii JavaScript.

This is a guided tour library and onboarding framework for React applications. It provides a system for creating interactive, step-by-step walkthroughs using element-anchored popovers and visual masking tools to highlight specific interface components. The library focuses on accessibility, providing built-in support for screen readers and keyboard navigation to ensure inclusive user onboarding. It allows for extensive customization by enabling the replacement of default interface elements, such as badges and buttons, with custom React components. The framework covers tour orchestration throu

Fancytree este o bibliotecă JavaScript concepută pentru randarea și gestionarea structurilor de date ierarhice interactive în interfețele web. Oferă un framework pentru afișarea informațiilor imbricate complexe sub formă de tree view-uri sau grile, susținând atât navigarea standard în arbore, cât și layout-urile de date tabelare. Biblioteca se distinge printr-o arhitectură modulară de plugin-uri care permite dezvoltatorilor să injecteze comportamente și elemente vizuale personalizate în ciclul de viață al componentei. Gestionează seturi mari de date prin implementarea lazy loading-ului la cerere, care preia nodurile copil doar atunci când este necesar pentru a menține responsivitatea. Utilizatorii pot interacționa cu datele prin reordonare drag-and-drop, editare inline a nodurilor și selecție multi-nod cu propagarea automată a stării. Dincolo de randarea de bază, proiectul include instrumente cuprinzătoare pentru gestionarea stării și manipularea datelor. Susține filtrarea conținutului în timp real, navigarea prin tastatură și persistența stărilor de expansiune și selecție a nodurilor pe parcursul sesiunilor de browser. Biblioteca este construită pe un sistem de normalizare recursivă a datelor și delegare a evenimentelor pentru a asigura performanța consistentă și gestionarea interacțiunii în diverse configurații ierarhice.

Această bibliotecă este o componentă React concepută pentru randarea grid-urilor de date de înaltă performanță. Aceasta oferă un framework structurat pentru afișarea seturilor de date mari prin utilizarea virtualizării rândurilor bazată pe fereastră, care asigură că doar porțiunea vizibilă a datelor este randată în Document Object Model (DOM). Componenta se distinge prin capabilități avansate de layout și navigare, inclusiv suport nativ pentru headere și coloane sticky care rămân ancorate în timpul scroll-ului. Dezvoltatorii pot exercita control imperativ asupra viewport-ului tabelului pentru a naviga la indici specifici sau offset-uri de pixeli, gestionând în același timp stări complexe ale grid-ului, cum ar fi vizibilitatea coloanelor, sortarea și extinderea rândurilor printr-o configurație centralizată. Biblioteca suportă o gamă largă de funcționalități interactive, inclusiv randarea personalizată a celulelor, fixarea coloanelor (pinning) și capacitatea de a adăuga rânduri de sumar pentru date agregate. Gestionează seturi de informații dense oferind aliniere flexibilă a coloanelor, controlul lățimii și trunchierea textului, permițând crearea de tabele interactive care răspund la evenimentele utilizatorului, cum ar fi click-urile și hover-urile.

Acest proiect este o componentă de grid de date de înaltă performanță pentru React, concepută pentru a randa seturi mari de date într-o interfață de tip foaie de calcul. Oferă un framework pentru afișarea informațiilor tabelare structurate, permițând în același timp interacțiuni complexe la nivel de celulă și sarcini de gestionare a datelor. Componenta se distinge prin suportul pentru fluxuri de lucru de editare de tip foaie de calcul, inclusiv navigarea prin tastatură și posibilitatea de a injecta componente personalizate în celule individuale. Utilizatorii pot gestiona dinamic layout-ul grid-ului prin redimensionarea coloanelor și organizarea header-elor, asigurându-se că interfața se adaptează nevoilor specifice de vizualizare a datelor. Grid-ul include capabilități pentru gestionarea volumelor mari de informații prin randare cu fereastră (windowed rendering) și încărcare leneșă (lazy loading), care mențin performanța prin procesarea doar a subsetului vizibil de date. De asemenea, oferă control imperativ prin referințe la componente, permițând manipularea programatică a pozițiilor de scroll și a stărilor de selecție.

🌌 A React toolkit for graph visualization based on G6.

This library is a high-performance data grid component for React applications, designed to manage and display large datasets. It provides a declarative configuration system that allows developers to define table structures, data sources, and feature toggles through a structured object schema. The library distinguishes itself through a flexible layout engine that supports complex UI requirements, such as pinning headers and specific columns to viewport edges during scrolling. It utilizes virtualized rendering to maintain interface responsiveness by displaying only the visible subset of data, e

Textures.js ported to React. Fully isomorphic.