Awesome GitHub RepositoriesComponent State Managers

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

This project is a declarative drag-and-drop library designed for building accessible and fluid interface interactions within web applications. It provides a component-based interface for managing complex list reordering and spatial relationships between elements, utilizing a specialized state container to coordinate movement logic. The library distinguishes itself through a focus on accessibility, maintaining a live connection between visual drag states and the browser accessibility tree to support screen readers and keyboard navigation. It optimizes performance by bypassing standard componen

This project is a technical reference for implementing static typing in applications built with React and Redux. It provides a comprehensive guide for establishing type-safe state management, focusing on the configuration of stores, actions, and reducers using TypeScript type inference and unions. The guide covers architectural patterns for defining props, generic components, and higher-order components with strict type definitions. It also provides methods for managing ambient type configurations and augmenting third-party modules to resolve missing or incorrect TypeScript definitions. The

This project is a comprehensive library of reusable React hooks designed to simplify browser API integration, state management, and component lifecycle tracking. It provides a declarative interface for managing complex browser interactions, allowing developers to encapsulate imperative logic into modular, composable functions that integrate directly with the component lifecycle. The library distinguishes itself by offering specialized utilities for asynchronous data orchestration, including built-in caching, retry logic, and loading state management. It also features advanced performance opti

react-map-gl is a library of reusable components and hooks for embedding high-performance WebGL map visualizations within React applications. It provides a declarative wrapper for Mapbox GL JS, synchronizing the map state and styles with a component-based state management system. The toolkit enables the rendering of complex 2D and 3D geospatial data visualizations on map layers. It includes a framework for developing custom map components and specialized user interface elements using shared context and dedicated hooks. The library manages interactive map integration and geospatial data visua

Google map library for react that allows rendering components as markers :tada:

React Autosuggest is a fully controlled React component that provides an autocomplete input with a dropdown of suggestions as the user types. It delegates all state management to the parent component through callbacks, making it compatible with state management patterns like Flux or Redux. The component implements WAI-ARIA accessibility patterns, including keyboard navigation with arrow keys, Enter, and Escape, along with live region integration for screen reader announcements. The component offers extensive customization through render-prop functions, allowing developers to replace the defau

MapCN is a React component library that wraps MapLibre GL into declarative, composable building blocks for interactive maps. It provides a set of small, reusable components for rendering maps, placing markers, drawing routes, and clustering points, all managed through React hooks, context, and refs for state and lifecycle control. The library distinguishes itself by offering a complete set of map features as individual React components that automatically adapt to light and dark themes. It includes components for interactive map rendering with zero configuration, marker placement with popups a

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

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

This project is a React component for visualizing, exploring, and editing JSON data structures through an interactive, tree-based user interface. It renders complex JSON arrays and objects in a responsive browser interface that supports collapsing and expanding nodes. The utility functions as an interactive editor, allowing users to modify, add, or delete keys and values within JSON objects graphically rather than through raw text files. It includes a clipboard manager for copying specific objects or arrays from the visualized tree directly to the system clipboard. The component supports the

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