20 repository-uri
Visualization libraries specifically designed for the React ecosystem.
Explore 20 awesome GitHub repositories matching part of an awesome list · React Components. Refine with filters or upvote what's useful.
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
Declarative React components for rendering D3-based charts.
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
Isomorphic data visualization components for React applications.
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
Acts as a browser extension for visualizing and debugging the component hierarchy, props, and state of React apps.
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
Collection of React components for building data visualizations.
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
Flexible and interactive charting library for mobile React environments.
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
Ships a pre-built React component that renders mathematical diagrams by accepting source files.
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,
React-based data visualization library built on G2.
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
Ships a self-contained diagram component that can be inserted into external web pages via a simple script tag.
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
Provides a feature-rich data grid component for managing large datasets in React applications.
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.
Ships an Excel-like data grid component for React with cell editing and keyboard navigation.
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.
A high-performance data grid component for React that renders millions of cells using the HTML Canvas API.
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
Provides a library of React components that render on both web and mobile.
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.
Supports the rendering of interactive data grids within React environments via simple configuration.
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
Ships a utility to obscure the screen with a visual mask that draws attention to specific React components.
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.
Provides a data visualization tool for displaying nested information in a tabular format with inline editing and checkbox selection capabilities.
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.
Ships a high-performance React component for rendering complex, virtualized data grids.
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.
Provides a high-performance data grid component for React that enables efficient rendering and navigation of large datasets.
🌌 A React toolkit for graph visualization based on G6.
React-based graph visualization library built 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
Serves as a high-performance data grid component specifically built for React applications.
Textures.js ported to React. Fully isomorphic.
React port of the Textures.js pattern library.