Awesome GitHub RepositoriesReact Renderers

React هي مكتبة JavaScript لبناء واجهات المستخدم تعتمد على معمارية قائمة على المكونات وتدفق بيانات أحادي الاتجاه.

This project is a community-driven knowledge base that serves as a centralized directory for the React and React Native ecosystems. It functions as a developer discovery portal, aggregating high-quality libraries, frameworks, and learning resources to assist in the research and selection of tools for modern web and mobile application development. The repository distinguishes itself through a hierarchical taxonomy that organizes a fragmented landscape of third-party software into functional domains. By utilizing markdown-based content curation, it provides a structured index that allows develo

react-use is a collection of reusable state and effect hooks for managing common logic in React applications. It serves as a comprehensive library for implementing state management patterns and wrapping various browser APIs into consistent hook interfaces. The project provides a specialized toolkit for DOM interaction and browser API integration, allowing components to track element dimensions, manage cookies, and monitor hardware sensors. It includes a suite of animation and timing utilities for physics-based numeric interpolation and frame-synced state updates. Beyond basic state managemen

react-spring is a declarative animation framework for React that drives visual transitions through state-driven declarations. It functions as a motion engine where animations are defined as target values pursued by a physics engine based on application state. The library utilizes a spring physics engine to calculate natural movements by simulating mass, tension, and friction instead of relying on fixed durations. To maintain high frame rates, it updates DOM elements directly via references to bypass the standard React render cycle. The framework covers physics-based motion and state-driven t

Enzyme is a testing utility for React components designed to verify their output and behavior in a test environment. It serves as a test harness for UI components, providing tools to render visual elements, manage state transitions, and simulate synthetic events. The library distinguishes itself through multiple rendering modes, including a shallow rendering engine for isolated unit testing and full DOM rendering for testing deep integration. It employs an adapter-based integration system to maintain compatibility across different versions of the underlying framework. The toolkit covers a br

react-sketchapp is a design system automation tool that translates React components into native Sketch design layers. It functions as a custom renderer that maps a virtual component tree to a design canvas, allowing for the programmatic generation and updating of design files from source code. The project provides a framework for building custom design utilities and automation scripts by treating the visual canvas as a programmable target. It includes a system for fetching external data to populate design components, enabling the creation of high-fidelity mockups and data-driven prototypes.

This project is an educational course and a collection of frontend projects designed to teach the core concepts and architecture of the React library. It serves as a practical guide for building modular user interfaces through a series of hands-on project builds. The repository includes a technical implementation of a custom React renderer, demonstrating how to transform JSX elements into a document object model. It further provides examples of state management, specifically illustrating how to share global data across a component tree using the provider pattern to avoid property drilling. T

React is a JavaScript library for building user interfaces through the composition of modular, self-contained components. It employs a declarative programming model where developers describe the desired visual state, and the library automatically manages the underlying document updates and state synchronization. By utilizing a virtual representation of the document, it calculates and applies minimal changes to the browser, ensuring efficient rendering even in complex applications. The library distinguishes itself through a sophisticated scheduling system that manages rendering work in increme

This is a browser-based Tetris game built with React, using Redux and Immutable.js to manage all game state in a single immutable store. The application renders the game board, next-block preview, and score display as React components, with state transitions that are predictable and support time-travel debugging through the Redux DevTools Extension. The game distinguishes itself through several integrated capabilities. It automatically adapts between keyboard and touch controls based on the user's input device, with configurable repeat rates for responsive gameplay. A persistence layer serial

Markdoc is a documentation content framework that extends standard Markdown with custom tags, typed schemas, and reusable components, parsing content into an abstract syntax tree and rendering it as React elements or HTML. It provides a structured authoring system where documents are processed through an AST-based pipeline, enabling validation, transformation, and flexible output generation. The framework distinguishes itself through a schema-driven validation pipeline that checks document structure and attribute values against defined rules, and a pluggable renderer architecture that accepts

Rax هو إطار عمل لتطبيقات React الشاملة وبيئة JavaScript متماثلة (isomorphic) مصممة لتقديم قاعدة كود واحدة عبر منصات الويب، والهواتف المحمولة، والتطبيقات المصغرة (mini-programs). يعمل كمحرك عرض للمكونات عبر المنصات يقوم بترجمة مكونات React إلى عناصر خاصة بكل منصة باستخدام مواصفات تعريفية موحدة. يستخدم إطار العمل مواصفات تعريفية موحدة لواجهة المستخدم لفصل منطق المكون عن طبقة واجهة المستخدم الأساسية، مما يسمح بمعالجة DOM موحدة وإدارة الأحداث عبر بيئات تنفيذ مختلفة. تتيح هذه البنية دمج مكونات التطبيقات المصغرة الأصلية وإضافات خاصة بالمنصة للاستفادة من الأجهزة أو البرمجيات المحلية. يتضمن إطار عمل للعرض من جانب الخادم (SSR) لإنشاء HTML ثابت لتحسين سرعة التحميل الأولية وظهور محركات البحث، مكملاً بآلية ترطيب (hydration) من جانب العميل لجعل الواجهة تفاعلية. يوفر النظام أيضاً إدارة دورة حياة التطبيق الشاملة للتعامل مع التهيئة، والتوجيه، وانتقالات الحالة عبر المنصات.

This project is a technical study resource and interview preparation guide focused on the React library. It provides a comprehensive frontend interview question bank and concept references designed to help developers master core library primitives and prepare for professional job interviews. The resource covers detailed explanations of React's technical architecture, including state management patterns, performance optimization strategies, and component design. It serves as a knowledge assessment tool for developers to test their understanding of modern frontend engineering through a structur

Raycast Extensions is an open-source platform for building and distributing self-contained plugins that integrate with the Raycast desktop application. It provides an extension plugin framework where developers create packages using TypeScript, React, and Node.js, with each extension declaring its commands and permissions through a static manifest. The platform includes a hot-reload development server that watches source files and triggers live UI updates without restarting the host application. The platform distinguishes itself through deep AI integration capabilities, allowing extensions to

HospitalRun Frontend is an offline-first progressive web application designed for hospital information system administration, enabling healthcare facilities to manage patient records, appointments, and clinical workflows through a web-based interface. The application stores patient data locally in the browser's IndexedDB database, allowing full functionality without a persistent internet connection, and synchronizes changes with the backend server via RESTful API calls when connectivity is restored. The system implements role-based access control routing that restricts navigation and feature

Lingui is a JavaScript internationalization library that provides a framework-agnostic core with bindings for React, SolidJS, Svelte, Astro, and other JavaScript frameworks. It operates through a compile-time message extraction pipeline that scans source files for translatable strings, generates standard PO, JSON, or CSV catalog files, and compiles them into optimized JavaScript modules for production deployment. The library uses macro-based message definition to wrap translatable text in source code while preserving context for extraction, and includes a plural rule engine that automatically

react-notion-x هو محرك عرض قائم على React وعميل TypeScript مصمم لتحويل بيانات Notion API إلى صفحات ويب ومكونات منسقة. يعمل كمحلل محتوى وعارض يقوم بجلب وتطبيع ومعالجة استجابات Notion API إلى هياكل بيانات متسقة للعرض. يتضمن المشروع أداة لتحويل محتوى صفحة Notion المعقد وهياكل الكتل إلى نص Markdown عادي. للحفاظ على الأداء، يستخدم واجهة تحميل كسول (lazy-loading) تؤجل تحميل العناصر الثقيلة مثل ملفات PDF والمعادلات الرياضية. يدعم العارض مجموعة واسعة من أنواع المحتوى، بما في ذلك كتل الكود مع تمييز الصيغة، ومجموعات البيانات، والمستندات المضمنة. يوفر قدرات للوصول إلى كل من الصفحات العامة والخاصة ويتضمن تقنيات تحسين الصور مثل العناصر النائية منخفضة الجودة.

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

next-intl is an internationalization framework for Next.js applications. It provides a system for managing translations, localized routing, and ICU message formatting to deliver multilingual content across server and client components. The project distinguishes itself through a focus on developer experience and type safety, utilizing a TypeScript translation validator that generates declaration files from JSON messages for compile-time key validation. It streamlines translation workflows with tools for automatically extracting strings from source code into message files and synchronizing thos