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 هو مكون شبكة بيانات React ومحرر جدولي يوفر واجهة جدول بيانات تفاعلية. تم تصميمه لإدارة البيانات الجدولية مع دعم مدمج لتحرير الخلايا والتنقل عبر لوحة المفاتيح. يتميز المشروع بمرونته في العرض والهيكل، مما يسمح باستبدال عناصر الجدول القياسية بترميز مخصص مثل القوائم أو divs. يدعم عرض الخلايا المخصص من خلال نظام تعيين يستبدل الخلايا الافتراضية بمكونات متخصصة بناءً على بيانات تعريف الخلية. يغطي المكون قدرات واسعة لإدارة البيانات الجدولية، بما في ذلك تتبع حالة التعديلات، وحذف النطاقات، ولصق البيانات. كما يوفر عناصر تحكم لسلوك الخلية، مثل تحديد حالة القراءة فقط ودمج الأعمدة.

Glide Data Grid هو شبكة بيانات افتراضية لـ React وTypeScript تستخدم واجهة برمجة تطبيقات HTML Canvas لعرض ملايين الخلايا بسلاسة. تم تصميمه كجدول بيانات يسهل الوصول إليه ويحافظ على معدلات إطارات عالية عند عرض وتصفح مجموعات البيانات الضخمة. يتميز المشروع ببنية عرض قائمة على Canvas تستخدم العرض الكسول (lazy rendering) وواجهة برمجة تطبيقات رسم مخصصة. يسمح هذا بمحتوى خلايا متخصص وتصميم قائم على البيانات يتجاوز دورات تحديث DOM القياسية لضمان أداء عالٍ. توفر الشبكة قدرات شاملة لتخطيط وإدارة البيانات، بما في ذلك دمج الخلايا، والأعمدة المجمدة، وارتفاعات الصفوف المتغيرة، وحساب عرض العمود التلقائي. كما يتضمن دعماً مدمجاً لتحرير الخلايا، واختيار العناصر، والبحث في بيانات الشبكة.

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 هي مكتبة JavaScript مستقلة عن إطار العمل لتصيير شبكات البيانات التفاعلية. تسمح المكتبة بعرض المعلومات المهيكلة في تنسيقات جدولية عبر بيئات واجهة أمامية مختلفة، مع دعم ملء البيانات من مصفوفات ثابتة أو استيرادات JSON. تتميز المكتبة بنظام إضافات لتوسيع مكونات واجهة المستخدم والمنطق، بالإضافة إلى خط أنابيب بيانات مخصص لتحويل المعلومات قبل عرضها. تتضمن المكتبة دعماً مدمجاً للتعريب متعدد اللغات لترجمة عناصر الواجهة والرسائل. يغطي المشروع إمكانيات تصور البيانات الأساسية بما في ذلك الفرز والتصفية وتصور الشبكة الديناميكي. توفر المكتبة أدوات لإدارة إعدادات التكوين والتكامل مع بيئات JavaScript المختلفة.

هذا المشروع عبارة عن مكتبة جولات إرشادية وإطار عمل لتأهيل المستخدمين في تطبيقات React. يوفر نظاماً لإنشاء جولات تفاعلية خطوة بخطوة باستخدام نوافذ منبثقة مثبتة على العناصر وأدوات قناع مرئي لتسليط الضوء على مكونات واجهة محددة. تركز المكتبة على إمكانية الوصول، حيث توفر دعماً مدمجاً لقارئات الشاشة والتنقل عبر لوحة المفاتيح لضمان تأهيل شامل للمستخدمين. يسمح النظام بتخصيص واسع النطاق من خلال تمكين استبدال عناصر الواجهة الافتراضية، مثل الشارات والأزرار، بمكونات React مخصصة. يغطي إطار العمل تنسيق الجولة من خلال إدارة الحالة واستهداف العناصر القائم على المحددات. يتضمن إمكانيات للتمرير التلقائي لمنطقة العرض، وإدارة انتقال النوافذ المنبثقة، والقدرة على تقييد تفاعل المستخدم مع الواجهة الأساسية أثناء الجولة.

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 is a JavaScript library designed for rendering and managing interactive, hierarchical data structures within web interfaces. It provides a framework for displaying complex nested information as tree views or grids, supporting both standard tree navigation and tabular data layouts. The library distinguishes itself through a modular plugin architecture that allows developers to inject custom behaviors and visual elements into the component lifecycle. It handles large datasets by implementing on-demand lazy loading, which fetches child nodes only when required to maintain responsivenes

هذه المكتبة عبارة عن مكون React مصمم لعرض شبكات البيانات عالية الأداء. توفر إطار عمل منظماً لعرض مجموعات البيانات الكبيرة باستخدام افتراضية الصفوف القائمة على النافذة، مما يضمن عرض الجزء المرئي فقط من البيانات في نموذج كائن المستند. يتميز المكون بقدرات تخطيط وتنقل متقدمة، بما في ذلك دعم أصلي للرؤوس والأعمدة الثابتة التي تظل مثبتة أثناء التمرير. يمكن للمطورين ممارسة تحكم إلزامي على منفذ عرض الجدول للانتقال إلى فهارس أو إزاحات بكسل محددة، مع إدارة حالات الشبكة المعقدة مثل رؤية الأعمدة، والفرز، وتوسيع الصفوف من خلال تكوين مركزي. تدعم المكتبة مجموعة واسعة من الميزات التفاعلية، بما في ذلك عرض الخلايا المخصص، وتثبيت الأعمدة، والقدرة على إلحاق صفوف ملخصة للبيانات المجمعة. تتعامل المكتبة مع مجموعات المعلومات الكثيفة من خلال توفير محاذاة مرنة للأعمدة، والتحكم في العرض، واقتطاع النص، مما يسمح بإنشاء جداول تفاعلية تستجيب لأحداث المستخدم مثل النقرات والتحويم.

هذا المشروع عبارة عن مكون شبكة بيانات عالي الأداء لـ React مصمم لعرض مجموعات البيانات الكبيرة داخل واجهة نمط جدول البيانات. يوفر إطار عمل لعرض المعلومات الجدولية المهيكلة مع تمكين تفاعلات معقدة قائمة على الخلايا ومهام إدارة البيانات. يتميز المكون بدعمه لسير عمل التحرير الشبيه بجدول البيانات، بما في ذلك التنقل القائم على لوحة المفاتيح والقدرة على حقن مكونات مخصصة في خلايا فردية. يمكن للمستخدمين إدارة تخطيط الشبكة ديناميكياً عن طريق تغيير حجم الأعمدة وتنظيم الرؤوس، مما يضمن تكيف الواجهة مع احتياجات تصور البيانات المحددة. تتضمن الشبكة قدرات للتعامل مع كميات كبيرة من المعلومات من خلال العرض في النوافذ (windowed rendering) والتحميل الكسول، والتي تحافظ على الأداء عن طريق معالجة المجموعة الفرعية المرئية فقط من البيانات. كما توفر تحكماً إلزامياً من خلال مراجع المكونات، مما يسمح بالتلاعب البرمجي بمواضع التمرير وحالات التحديد.

🌌 A React toolkit for graph visualization based on G6.

هذه المكتبة عبارة عن مكون شبكة بيانات عالي الأداء لتطبيقات React، مصمم لإدارة وعرض مجموعات البيانات الكبيرة. يوفر نظام تكوين تعريفياً يسمح للمطورين بتحديد هياكل الجدول، ومصادر البيانات، ومفاتيح تبديل الميزات من خلال مخطط كائن منظم. تتميز المكتبة بمحرك تخطيط مرن يدعم متطلبات واجهة المستخدم المعقدة، مثل تثبيت الرؤوس وأعمدة محددة بحواف إطار العرض أثناء التمرير. تستخدم العرض الافتراضي للحفاظ على استجابة الواجهة من خلال عرض المجموعة الفرعية المرئية فقط من البيانات، مما يضمن أداءً متسقاً بغض النظر عن إجمالي عدد العناصر. بعيداً عن قدرات التخطيط والأداء الأساسية، يوفر المشروع خيارات تخصيص واسعة النطاق. يمكن للمطورين حقن مكونات React مخصصة لتحديد مظهر وسلوك الخلايا الفردية وتطبيق أنماط مرئية من خلال متغيرات CSS ذات النطاق، مما يسمح بعرض بيانات مخصص دون تعديل منطق المكون الداخلي.