Awesome GitHub RepositoriesControlled Components

Preact is a lightweight declarative user interface library designed for building high-performance web applications. It utilizes a component-based architecture where interfaces are defined as functional or class-based units, relying on a virtual DOM to perform efficient state reconciliation and updates. By prioritizing a minimal footprint, the library enables developers to create modular, predictable, and testable user interfaces while maintaining compatibility with standard browser APIs. The library distinguishes itself through a reactive state engine that leverages signals to track dependenc

Formik is a React form management library and state management tool. It serves as a client-side form validator for checking user entries against defined rules and managing associated error messages before submission. The library synchronizes user input values across multiple fields into a single object for retrieval and manipulates the transition of form data from initial entry through validation and final submission. It provides capabilities for tracking complex form state, managing form submissions, and validating user inputs to ensure data integrity.

Draft-js is a framework for building customizable rich text editors within React applications. It functions as a content editable framework that separates the underlying data model from the visual rendering layer, acting as a rich text content engine to manage complex text data and formatting. The project utilizes an immutable state management system to ensure consistent updates and predictable undo history. It manages editor state through persistent data structures, providing an immutable data state manager to prevent accidental mutation. The framework includes capabilities for high perform

Leva est un panneau de contrôle GUI React et un éditeur de paramètres en temps réel utilisé pour surveiller et ajuster l'état et les variables de l'application sans modifier le code ni recharger la page. Il fonctionne comme un débogueur d'état dynamique et une bibliothèque d'entrée extensible qui fournit une interface visuelle pour affiner les valeurs numériques, booléennes et textuelles au sein d'une application web en cours d'exécution. Le projet se distingue par un système de plugins qui permet la création de composants d'entrée personnalisés et de comportements spécialisés pour prendre en charge des types de données uniques. Il utilise l'inférence de type pour mapper automatiquement les données au widget visuel approprié, bien que ce mappage puisse être outrepassé pour forcer des types d'entrée spécifiques. L'interface prend en charge diverses catégories d'entrée, notamment les plages numériques, les vecteurs, les sélecteurs de couleur et les champs de téléchargement de médias. Les contrôles peuvent être organisés en dossiers hiérarchiques, affichés conditionnellement en fonction d'autres valeurs et synchronisés avec des magasins de données externes. Le système surveille également le cycle de vie de l'édition, permettant des rappels lorsque les utilisateurs commencent et terminent leurs interactions pour optimiser les performances des opérations coûteuses.

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

ComponentKit is a declarative UI framework for building iOS interfaces through composition of small, reusable components. It provides a structured approach to constructing user interfaces where each component is defined as an immutable, pure function of its inputs, enabling predictable rendering and state management. The framework supports both stateless and stateful components, with controllers that can be attached to manage persistent state across component updates. The framework distinguishes itself through its component architecture that emphasizes explicit data flow and compile-time safe

Zag est une bibliothèque de machine à états UI headless qui fournit une logique de composant non stylisée pour assurer un comportement cohérent à travers différents moteurs de rendu. Elle fonctionne comme une boîte à outils pour modéliser des interactions d'interface utilisateur complexes en utilisant des statecharts, découplant la logique sous-jacente et les attributs d'accessibilité du stylage visuel. La bibliothèque est agnostique au framework, utilisant des adaptateurs spécialisés pour faire le pont entre sa logique de machine à états et diverses bibliothèques JavaScript telles que React, Solid, Vue et Svelte. Cette approche permet aux développeurs de maintenir un modèle d'interaction unique tout en appliquant n'importe quelle solution CSS ou de stylage via des attributs de données pilotés par l'état. Zag couvre un large éventail de domaines fonctionnels, incluant une gestion complète de l'accessibilité pour la navigation au clavier et les attributs ARIA, ainsi qu'une vaste collection de primitives interactives. Celles-ci incluent des contrôles de saisie, des éléments de navigation comme les menus et onglets, des composants de superposition tels que les dialogues et popovers, et une gestion média complexe pour le recadrage d'image et la capture de signature. Elle fournit également des utilitaires pour la gestion de données hiérarchiques, la gestion de listes asynchrones et un système pour construire des visites guidées de produits.

react-mosaic est un gestionnaire de fenêtres en mosaïque React utilisé pour organiser les composants dans une grille redimensionnable de fenêtres et de conteneurs à onglets. Il fournit un système de mise en page avec des volets divisés redimensionnables et un orchestrateur de fenêtres glisser-déposer pour organiser le contenu en lignes et colonnes imbriquées. Le système inclut un moteur de mise en page sérialisable qui convertit les arrangements de fenêtres en JSON, permettant la persistance et la restauration des configurations d'espace de travail à travers les sessions. Il prend en charge une interface d'espace de travail à onglets où plusieurs panneaux sont regroupés dans des zones uniques avec des en-têtes commutables. Le projet couvre une gestion complète de la mise en page via un contrôle programmatique et une mosaïque automatisée, incluant le réarrangement par glisser-déposer et le rééquilibrage de l'ordre des fenêtres. Il fournit également des options de personnalisation UI pour les barres d'outils des fenêtres, les en-têtes d'onglets et le rendu d'état vide.