23 repositorios
Libraries that connect external state management containers to React UI components.
Distinct from React Integrations: Distinct from general React components or renderers; specifically refers to the bridge between a state store and the UI framework.
Explore 23 awesome GitHub repositories matching web development · React State Bindings. Refine with filters or upvote what's useful.
React Redux is a set of official bindings and integration layers that connect a Redux global state container to a React user interface. It functions as a state synchronization library and a communication bridge, allowing components to read state and dispatch actions to a centralized store. The project decouples business logic from the view layer, ensuring that the user interface automatically updates whenever the underlying global state changes. It manages complex data flows by linking the UI to a central state container to share data across different components and screens. The library impl
Provides official state bindings that connect a Redux store to React UI components.
React Redux is a global state management bridge and a set of bindings that connect React components to a Redux state store. It serves as a communication layer and state store connector, allowing a declarative user interface to synchronize with a centralized source of truth. The library enables the synchronization of shared global state across an application by providing mechanisms to read state and dispatch actions directly from the view layer. It ensures predictable state transitions by bridging the gap between UI components and the Redux state container. The project covers core capabilitie
Bridges the gap between Redux state containers and React components for efficient data synchronization and rendering.
React-Redux provides the official bindings that connect a Redux state container to a React user interface. It functions as a state management integration and UI state connector, enabling the synchronization of a centralized data store with a component tree. The library ensures a predictable UI state flow by implementing a unidirectional data path between the interface and the state container. It allows components to read global state and dispatch actions to trigger updates, maintaining a single source of truth across the application. The project handles state synchronization through a combin
Connects an external Redux state management container to React UI components for automatic synchronization.
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
Integrates the editor's internal state with React components using specialized state bindings.
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
Allows updating component properties and props to verify the user interface response to data changes.
Dva is a state management library and client-side application framework designed for building user interfaces with React and Redux. It functions as an asynchronous logic orchestrator and a single page application router, organizing application data through a structured data flow of reducers, effects, and subscriptions. The framework distinguishes itself through the use of generator functions to manage asynchronous workflows and sequential side effects, keeping these operations separate from synchronous state updates. It implements namespace-based model organization to group business logic and
Connects the Redux-based state management container to React UI components via structured data flow.
Recompose is a suite of toolsets for implementing higher-order component composition, context extraction, render optimization, and external state integration. It provides a library of utilities to wrap components in reusable logic and behavioral layers, allowing developers to chain functional wrappers and reduce nesting within a component tree. The project focuses on the composition of functional wrappers to inject properties and behavior into components. It includes a set of helpers for extracting values from component context and passing them as direct properties, as well as tools for integ
Bridges external data sources and state management containers to React UI components.
Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux
Teaches binding React components to state changes for automatic UI re-rendering.
Reactide is the first dedicated IDE for React web application development.
Debugs React applications by viewing a live component tree with props and state for every component.
Valtio is a proxy-based state management library and reactive state engine that provides a mutable state store. It allows application state to be updated through direct object mutations rather than immutable patterns, using JavaScript proxies to track changes and trigger updates. For React applications, it includes a synchronization hook that ensures components re-render only when the specific properties they access are modified. The system supports reactive data derivation through computed properties that automatically update when their underlying dependencies change. It maintains reactivity
Ships a synchronization hook that connects proxy state to React components for optimized rendering.
Craft.js is a framework for building extensible drag-and-drop page editors using React components and serializable state management. It provides the core infrastructure to construct custom page builders where users can compose layouts by dragging, dropping, and repositioning elements within a structured editor environment. The framework manages editor state through a component-based node tree, where each user element is represented as an internal node storing its type, props, and parent relationships. This state is managed via React Context and can be serialized to JSON for persistence and sh
Manages editor state through React Context, enabling components to read and manipulate the page composition tree.
react-native-mmkv is a synchronous mobile persistence system that provides an encrypted key-value store for mobile applications. It serves as a high-performance wrapper for the MMKV storage engine, eliminating asynchronous overhead by reading and writing values directly to disk. The project distinguishes itself through shared app group storage, which allows data access across multiple application extensions via a shared filesystem directory. It also provides state-synced storage hooks that automatically trigger component updates when stored key-value pairs change. The system covers a broad r
Ships state-synced storage hooks that automatically trigger React component updates when stored values change.
re-frame es un framework funcional para construir aplicaciones de una sola página (SPA) en ClojureScript. Proporciona una base de datos centralizada e inmutable que sirve como única fuente de verdad para todo el estado de la aplicación, aplicando un flujo de datos unidireccional estricto donde los eventos activan transiciones de estado y actualizaciones de vista posteriores. El framework se distingue por un grafo de señales reactivas y un pipeline de middleware basado en interceptores. Al tratar la lógica de la aplicación como una secuencia de eventos basados en datos y efectos secundarios declarativos, desacopla la lógica de negocio de la capa de vista. Esta arquitectura permite a los desarrolladores gestionar transiciones de estado complejas y operaciones externas mediante funciones puras, asegurando que los efectos secundarios sean ejecutados por un intérprete separado en lugar de llamadas imperativas. El sistema incluye un conjunto completo de capacidades para gestionar la arquitectura de la aplicación, incluyendo la derivación de datos reactivos, la reconciliación de vistas basada en suscripciones y la gestión de estado impulsada por eventos. Admite flujos de trabajo de desarrollo avanzados como el rastreo de eventos, puntos de control de estado y la capacidad de crear stubs de efectos secundarios para pruebas aisladas. El proyecto está diseñado para integrarse con React, utilizando la reconciliación del DOM virtual para actualizar eficientemente las interfaces de usuario. Proporciona un conjunto robusto de utilidades para manejar preocupaciones transversales, gestionar grafos de flujo de datos complejos y coordinar operaciones asíncronas dentro de un pipeline de eventos secuencial y predecible.
Connects external state management containers to React UI components to decouple business logic.
Refluxjs es una librería de gestión de estado diseñada para implementar una arquitectura de flujo de datos unidireccional. Gestiona el estado de la aplicación a través de un ciclo estricto de acciones y almacenes (stores) para evitar bucles de actualización impredecibles. La librería coordina operaciones asíncronas gestionando flujos de eventos y activando acciones relacionadas de éxito o fallo. También proporciona un registro de estado global que rastrea los estados de los almacenes mediante identificadores únicos, permitiendo la clonación profunda para la persistencia y la depuración de viaje en el tiempo (time-travel debugging). Su superficie de capacidades cubre la gestión centralizada del estado, incluyendo la creación de almacenes de datos y la agregación de estados derivados. Incluye herramientas para interceptar emisiones de acciones mediante hooks pre-emisión y mecanismos para vincular el estado del almacén directamente a los componentes de la interfaz de usuario para el renderizado automático.
Binds central store data directly to React components to trigger automatic view re-renders.
Este proyecto es un banco de pruebas especializado y utilidad de mocking diseñada para realizar pruebas unitarias de hooks de React de forma aislada. Proporciona un entorno de componentes simulado que ejecuta la lógica del hook y rastrea los valores devueltos sin requerir una interfaz de usuario completa. La biblioteca permite la verificación de los ciclos de vida de los hooks, incluyendo las fases de montaje, actualización y desmontaje. Cuenta con mecanismos para inyectar propiedades para forzar re-renderizados y un sistema de espera asíncrono para asegurar que las actualizaciones de estado se procesen antes de ejecutar las aserciones. El conjunto de herramientas cubre la verificación de la gestión de estado, limpieza automatizada del ciclo de vida para prevenir fugas de estado entre pruebas y la capacidad de activar actualizaciones de estado para verificar cómo responden los hooks a entradas cambiantes.
Utilities for verifying how hooks respond to state changes by triggering re-renders and managing cleanup.
TinyBase es un almacén de datos reactivo y base de datos relacional en memoria diseñada para la persistencia de estado del lado del cliente. Sirve como un motor de sincronización local-first que fusiona estados distribuidos utilizando tipos de datos replicados libres de conflictos (CRDT) y relojes lógicos para asegurar la convergencia determinista de los datos. El proyecto cuenta con una librería de validación de esquemas que convierte definiciones externas de herramientas como Zod, Yup y TypeBox en definiciones de almacén con seguridad de tipos. Proporciona una infraestructura para la edición colaborativa en tiempo real, utilizando la sincronización con Automerge, Yjs y PartyKit para mantener un estado consistente entre múltiples clientes y servidores. La superficie de capacidad incluye modelado de datos relacionales con tablas y claves foráneas, consultas e indexación tipo SQL y transacciones atómicas para mutaciones agrupadas. Admite una amplia gama de adaptadores de persistencia, incluyendo almacenamiento en navegador, SQLite y Cloudflare Durable Objects. El sistema también proporciona enlace de estado bidireccional y componentes declarativos para la integración con React, SolidJS y Svelte.
Provides specialized bindings that connect the reactive data store to React UI components.
Sound-redux es un reproductor de audio basado en React y cliente de la API de SoundCloud diseñado para navegar y reproducir pistas de audio. Funciona como un gestor de estado de Redux para sincronizar la reproducción y los metadatos de las pistas en toda la aplicación. El proyecto se integra con la API de SoundCloud para obtener y mostrar pistas de música e información del artista. Esto permite la construcción de una interfaz de transmisión de música que conecta una interfaz de usuario personalizada a servicios externos remotos para el consumo público. La aplicación utiliza un sistema de gestión de estado basado en Redux y un modelo de renderizado de interfaz de usuario basado en componentes. Incorpora enrutamiento de aplicaciones de una sola página e integración de API basada en REST para gestionar los flujos de datos y la navegación.
Handles complex application states and data flows for a media player using React and Redux.
Effector is a reactive state management library and data flow orchestrator designed for building complex, event-driven applications. It models application logic as a directed acyclic graph, where state updates and asynchronous side effects propagate automatically through declarative pipelines. By decoupling business logic from user interface layers, it allows developers to maintain state in independent containers that communicate via standard interfaces, ensuring the system remains framework-agnostic. The library distinguishes itself through its robust support for isolated execution scopes, w
Connects state containers to components using specialized hooks to trigger re-renders based on data changes.
Effector is a reactive state management library designed for building complex, event-driven applications. It functions as a data flow engine that models application logic as a directed acyclic graph, ensuring that state updates propagate automatically through interconnected nodes. By utilizing atomic state updates and declarative unit composition, the library maintains data consistency and provides a predictable execution model for managing application state. The project distinguishes itself through its framework-agnostic architecture, which decouples business logic from user interface implem
Creates a component that observes a state store and triggers re-renders when the stored value changes using the render props pattern.
mobx-react es una librería que proporciona enlaces de estado para conectar componentes de React al estado observable de MobX. Funciona como un sincronizador de estado de componentes, asegurando que los elementos de la interfaz de usuario se vuelvan a renderizar automáticamente solo cuando cambian los datos observados específicos que consumen. El proyecto permite una arquitectura de estado desacoplada al mover la lógica de negocio y el estado del dominio a almacenes independientes, separando la gestión de datos del árbol de componentes de React. Facilita la distribución global del estado a través de jerarquías de componentes profundas utilizando proveedores y contexto para evitar el paso manual de props (prop drilling). La librería cubre una amplia gama de primitivas de gestión de estado, incluyendo colecciones observables, actualizaciones basadas en acciones y derivación de estado computado. Proporciona ayudantes de integración de UI tanto para componentes de clase como funcionales, junto con optimizaciones de rendimiento para la precisión del re-renderizado de componentes y la prevención de fugas de memoria durante el renderizado del lado del servidor. El proyecto está implementado en TypeScript.
Connects external MobX observable state management containers to React UI components for automatic re-renders.