react-automata - A state machine abstraction for React

  •        21

A state machine abstraction for React that provides declarative state management and automatic test generation. react and react-test-renderer are peer dependencies.

https://github.com/MicheleBertoli/react-automata

Dependencies:

glob-to-regexp : ^0.4.0
hoist-non-react-statics : ^3.0.1
invariant : ^2.2.4
memoize-one : ^4.0.0
prop-types : ^15.6.1
xstate : ^3.3.0

Tags
Implementation
License
Platform

   




Related Projects

xstate - Functional, Stateless JS Finite State Machines and Statecharts

  •    TypeScript

Functional, stateless JavaScript finite state machines and statecharts. Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.

ReactStateMuseum - A whirlwind tour of React state management systems by example

  •    Javascript

Every app is meant to be small, simple, and the same as each other. The only difference should be the state management decisions of each. The repeated React and ReactNative app is a Packing List, with the name based on the state technology.

OpenFst Library for constructing weighted finite-state transducer

  •    C++

OpenFst is a library for constructing, combining, optimizing, and searching weighted finite-state transducers (FSTs). Weighted finite-state transducers are automata where each transition has an input label, an output label, and a weight. FSTs have key applications in speech recognition and synthesis, machine translation, optical character recognition, pattern matching, string processing, machine learning, information extraction and retrieval among others.

constate - Scalable state manager using React context

  •    TypeScript

React state management library built with scalability in mind. You can start simple with local state and scale up to global state with ease when needed. In computer science, a container is a class, a data structure, or an abstract data type (ADT) whose instances are collections of other objects. In other words, they store objects in an organized way that follows specific access rules.

Stately

  •    Javascript

Stately.js is a JavaScript based finite-state machine (FSM) engine for Node.js and the browser. Both will return a new stateMachine object, with all events from all states attached to it. The machine will transition into the initial state initialStateName or the first attached stateObject if initialStateName is omitted. In addition to the events the stateMachine object has a getMachineState() method, returning the current name of the machines state, getMachineEvents(), returning possible events in the current state.


react-powerplug - :electric_plug: Renderless Containers

  •    Javascript

React PowerPlug is a set of pluggable renderless components and helpers that provides different types of state and logic utilities that you can use with your dumb components. It creates state and passes down the logic to the children, so you can handle your data. Read about the Render Props pattern.

reactn - React, but with built-in global state management.

  •    TypeScript

ReactN is a extension of React that includes global state management. It treats global state as if it were built into React itself -- without the boilerplate of third party libraries. For support, reach out to us on the Reactiflux Discord channel #reactn.

redux-form - A Higher Order Component using react-redux to keep form state in a Redux store

  •    Javascript

redux-form works with React Redux to enable an html form in React to use Redux to store all of its state. You can play around with redux-form in these sandbox versions of the Examples.

react-controllables - Easily create controllable components

  •    Javascript

If you've worked with forms in ReactJS, you're probably familiar with the idea of controlled and uncontrolled components. Put simply, controlled components have their state controlled by another component whereas uncontrolled components manage their own state. It turns out that this idea can be really useful for custom components too. Everything is fine until one day when the designer of your site decides to add another component to the page that also changes the selected tab. Now you've got a problem: you need to hoist the state to a higher level so it can be shared between the two components.

stent - Stent is combining the ideas of redux with the concept of state machines

  •    Javascript

Stent is combining the ideas of Redux with the concept of state machines. State machine is a mathematical model of computation. It's an abstract concept where the machine may have different states but at a given time fulfills only one of them. It accepts input and based on that (plus its current state) transitions to another state. Isn't it familiar? Yes, it sounds like a front-end application. That's why this model/concept applies nicely to UI development.

MobX - Simple, scalable state management.

  •    Javascript

MobX is a battle tested, simple and scalable state management library transparently applying functional reactive programming (TFRP). The Mobx design principle is very simple: Anything that can be derived from the application state, should be derived. Automatically. This includes the UI, data serialization, server communication, etc.

react-ionize - A React renderer for building your entire Electron app

  •    Javascript

react-ionize is a library which lets you build the "non-browser" parts of an Electron app using React components to manage your application's state. Electron applications consist of two types of process: a main process which manages the lifecycle of the application, and several renderer processes, which display webpages which comprise the application's GUI. While it's fairly common to use React and ReactDOM to build an HTML/CSS/JS interface in the renderer process, react-ionize runs in the main process, managing things like window size/position, menu contents, and application-wide events.

react-helmet-async - Thread-safe Helmet for React 16+ and friends

  •    Javascript

This package is a fork of React Helmet. <Helmet> usage is synonymous, but server and client now requires <HelmetProvider> to encapsulate state per request. react-helmet relies on react-side-effect, which is not thread-safe. If you are doing anything asynchronous on the server, you need Helmet to encapsulate data on a per-request basis, this package does just that.

fst - Represents large sets and maps compactly with finite state transducers.

  •    Rust

This crate provides a fast implementation of ordered sets and maps using finite state machines. In particular, it makes use of finite state transducers to map keys to values as the machine is executed. Using finite state machines as data structures enables us to store keys in a compact format that is also easily searchable. For example, this crate leverages memory maps to make range queries very fast.Check out my blog post Index 1,600,000,000 Keys with Automata and Rust for extensive background, examples and experiments.

rx-react - ReactJS bindings for RxJS

  •    Javascript

The StateStreamMixin allows to bind a component state to an RxJS Observable stream. The way to achieve the binding is to provide a getStateStream method on your component that returns an RxJS Observable, the StateStream mixin will automatically merge the state of your component with the values published by the returned observable. The subscription will be automaticly cleaned on component unmount. The LifecycleMixin allows you to consume React components lifecycle events as RxJS Observable. The LifecycleMixin will inject a property lifecycle to the component, that property contains an observable for each lifecycle events.

focal - Program user interfaces the FRP way.

  •    TypeScript

Type safe, expressive and composable state management for React applications. You can play with this example online on CodeSandbox.

fullstack-apollo-react-express-boilerplate-project - 💥A sophisticated Apollo in React and Express boilerplate project

  •    Javascript

A full-fledged Apollo Server 2 with Apollo Client 2 starter project with React, Express and PostgreSQL. Since this boilerplate project is using PostgreSQL, you have to install it for your machine and get a database up and running. You find everything for the set up over here: Setup PostgreSQL with Sequelize in Express Tutorial. After you have created a database and a database user, you can fill out the environment variables in the server/.env file.

react-ladda - React wrapper for Ladda buttons.

  •    Javascript

LaddaButton is a React component that renders a Ladda button. You can change the button's loading state and progress using the loading and progress props.

user-event - 🐕 Simulate user events for react-testing-library

  •    Javascript

Simulate user events for react-testing-library. user-event tries to simulate the real events that would happen in the browser as the user interacts with it. For example userEvent.click(checkbox) would change the state of the checkbox.