Awesome GitHub RepositoriesReact State Primitives

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 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 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

Downshift is a headless UI component library and framework for React that provides the state and interaction primitives necessary to build accessible autocomplete, combobox, and select dropdown components. It functions as a WAI-ARIA UI framework, generating the required ARIA attributes and keyboard event handlers to ensure screen reader compliance without providing any default styling. The library utilizes a headless component pattern to decouple interaction logic from the visual presentation. It manages complex state transitions through reducers and synchronizes internal UI state with extern

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

Precedent est un starter d'application Next.js et une bibliothèque de composants fournissant un ensemble fondamental d'outils et de primitives préconfigurés pour construire des interfaces web prêtes pour la production. Il sert de boîte à outils pour amorcer des applications avec une authentification intégrée, des analyses et une collection de composants UI opinionnés. Le projet se distingue par un kit UI Tailwind CSS qui combine des primitives d'accessibilité et des bibliothèques de mouvement pour créer des interfaces soignées. Il inclut un générateur d'images côté serveur pour créer par programmation des images de partage social dynamiques et des visuels de prévisualisation à la périphérie du réseau (edge). La bibliothèque couvre un large éventail de capacités, incluant l'intégration d'identités tierces pour l'authentification et la gestion de session, des analyses de site web axées sur la confidentialité pour suivre les métriques des visiteurs, et une collection de hooks React personnalisés pour gérer l'état côté client, le stockage local et la visibilité des éléments. Elle fournit également des utilitaires pour le formatage de texte et de nombres.

use-immer est un utilitaire de gestion d'état React qui fournit un hook personnalisé pour mettre à jour un état immuable. Il permet la modification d'une version brouillon (draft) temporaire des données pour calculer la transition d'état suivante. L'outil simplifie la gestion d'états complexes en permettant des mutations directes sur un brouillon, ce qui élimine le besoin de copier manuellement des objets ou des tableaux imbriqués en utilisant des opérateurs de propagation (spread operators). Cette approche garantit la génération d'un nouveau snapshot immuable pour des changements d'état prévisibles. La bibliothèque couvre des capacités pour mettre à jour des états profondément imbriqués et prend en charge le traitement des changements d'état via des réducteurs (reducers).

Ce projet est une bibliothèque organisée de logique réutilisable conçue pour simplifier la gestion d'état et le comportement des composants dans les applications web. Elle fonctionne comme une boîte à outils de développement frontend qui fournit une collection de hooks pilotés par la communauté pour gérer les tâches courantes au sein du cycle de vie des composants. La bibliothèque se distingue en offrant un dépôt centralisé de solutions partagées pour gérer des données complexes et des interactions d'interface. En fournissant des abstractions pré-construites pour les interfaces de navigateur, les requêtes de données réseau et les composants d'interface utilisateur, elle permet aux développeurs de remplacer le boilerplate répétitif par une logique modulaire et fonctionnelle. La collection couvre un large éventail de capacités, incluant la synchronisation de données asynchrones, l'intégration de fonctionnalités natives du navigateur et l'encapsulation de comportements d'interface standard. Ces outils sont organisés pour aider les développeurs à identifier et à implémenter des modèles cohérents pour la gestion d'état et des effets de bord à travers leurs projets.