Awesome GitHub RepositoriesReact Hooks

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

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

This project is a comprehensive framework for building AI-powered applications, providing a unified toolkit for orchestrating language models, autonomous agents, and interactive user interfaces. It serves as a central library for managing the entire lifecycle of AI interactions, from initial prompt generation and model provider abstraction to complex, multi-step reasoning and tool execution. The framework distinguishes itself through its deep integration with frontend development, specifically by enabling generative user interfaces that render dynamic components directly from model outputs. I

Jotai is a state management library for React applications that utilizes an atomic model to handle data. It organizes application state into small, independent units called atoms, which automatically track dependencies and trigger granular updates to components. By building state through these composable primitives, the library ensures that only the necessary parts of an application re-render when data changes. The library distinguishes itself through its flexible approach to state composition and asynchronous data handling. It integrates promises directly into the state model, allowing devel

Recoil is an atomic state management framework and library for React. It functions as a state container that breaks application data into independent units called atoms to minimize unnecessary component re-renders. The system integrates with React hooks to provide a reactive state store. It utilizes a graph-based approach to data flow, employing a dependency graph to track relationships between state units and propagate updates automatically. The library coordinates global state across complex component trees, enabling independent components to communicate and share data without manual prop

This project is a collection of practical code samples and demonstrations for building user interfaces with React. It serves as a set of examples illustrating common interface patterns, state management techniques, and the implementation of modular, reusable components. The repository provides specific demonstrations for several core development areas. These include samples for retrieving and rendering asynchronous data from external APIs, managing component lifecycles during mounting and unmounting, and handling internal state to sync form inputs. It also includes guides for direct document

This library provides a collection of reusable hooks designed to manage state, side effects, and browser interactions within React applications. It functions as a toolkit for handling asynchronous data fetching and complex component logic, offering a set of type-safe utilities that reduce boilerplate code and improve maintainability. The library distinguishes itself through its focus on isomorphic lifecycle synchronization, ensuring consistent behavior across client and server environments to prevent hydration mismatches. It employs ref-based closure stabilization to ensure that asynchronous

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-dropzone is a React hook and HTML5 drag-and-drop wrapper used to create interactive areas that accept files via drag-and-drop or a native system file picker. It serves as a web file system interface, bridging browser interfaces with the operating system's file selection process. The project distinguishes itself by managing complex event propagation to isolate drop zones and providing global drag-state detection for document-wide visual feedback. It supports both traditional hidden input triggers and the modern browser File System Access API for secure context integration, and it can det

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

This project is a collection of reusable React hooks designed to wrap browser APIs, manage state persistence, and handle DOM observation. It provides a consistent interface for integrating native browser capabilities directly into the React component lifecycle. The library includes specialized toolkits for monitoring the browser environment, such as window resizing, network connectivity, and viewport visibility. It also provides mechanisms for managing execution timing through debouncing, throttling, and the control of timeouts and intervals. Additional capabilities cover state management wi

This project is a visual guide that explains the internal architecture of a UI library through annotated diagrams and step-by-step walkthroughs. It covers core mechanisms including how browser events are normalized into a unified system, how the fiber tree is constructed and reconciled for incremental updates, how state and effect hooks are managed through their lifecycle, and how the scheduler prioritizes work units to maintain responsive rendering. The resource distinguishes itself by mapping the library's package dependency hierarchy and providing visual explanations of how these internal

usehooks-ts is a comprehensive collection of reusable TypeScript-based hooks designed for managing state, DOM events, and browser API interactions within React applications. It provides a typed library of functions to handle common frontend patterns and side effects. The project distinguishes itself by offering specialized hooks for browser integration, including tools for interacting with the system clipboard, managing local and session storage persistence, and loading external scripts. It also includes utilities for responsive UI development, such as tracking media queries, window dimension

BAML is a prompt engineering framework and LLM client generator that defines AI prompts as type-safe functions. It serves as a structured data extraction tool and workflow orchestrator, transforming unstructured model responses into strongly typed objects using a custom schema language and alignment algorithms. The project distinguishes itself by using a compiler to generate language-specific boilerplate code for API communication and output parsing. It features a dedicated environment for designing complex prompt templates with conditional logic and reusable snippets, and employs genetic alg

Logocreator is an open-source AI logo generator that creates professional logos from text descriptions. It uses the Flux AI model hosted on Together AI to interpret a company name, style preference, and optional background into a visual design, producing branded logos without requiring design skills or expensive software. The tool operates through a React frontend that manages user input and logo display, with a serverless backend that routes image generation requests to external AI APIs for scalable processing. It includes a prompt engineering pipeline that transforms user descriptions into

Waku is a minimal React framework built around React Server Components. It renders components exclusively on the server for data fetching and server-side logic, then hydrates client components in the browser for interactivity. The framework supports hybrid rendering, mixing static prerendering at build time with dynamic per-request rendering within a single application, and allows independently loading slice components that can be static or dynamic. The framework distinguishes itself through its file-based routing system that defines pages, layouts, and API endpoints by placing files in a dir

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,

Orval is an OpenAPI-to-TypeScript code generator that produces fully typed API clients, data-fetching hooks, mock data, validation schemas, and server handlers from OpenAPI or Swagger specifications. It reads any YAML or JSON API specification and generates TypeScript interfaces, HTTP request functions, and framework-specific integration code that ensures compile-time correctness for all API calls. The project distinguishes itself by generating production-ready data-fetching hooks for React Query, Vue Query, Svelte Query, Solid Query, Angular, and SWR, complete with automatic cache invalidati

Reach UI is an open-source library of accessible, low-level React components designed to serve as a foundation for building design systems and interactive user interfaces. It is an accessibility-first toolkit that handles core concerns like ARIA attributes, focus management, and screen reader support automatically, without requiring developer configuration. The library is built as a collection of standalone packages, each managing its own lifecycle and dependencies, enabling granular adoption and tree-shaking. Components use a polymorphic rendering pattern, accepting an as prop to render as

PartyKit is a serverless WebSocket backend platform for building real-time multiplayer applications. It provides a globally distributed edge computing runtime that runs stateful server code close to users, with automatic scaling and hibernation for idle rooms. The platform handles WebSocket connections, HTTP requests, and durable storage without requiring infrastructure management, and includes a client and server SDK with hooks, storage, and Yjs integration for building collaborative features. The platform distinguishes itself through per-room isolation using Durable Objects, where each uniq