react-automata - A state machine abstraction for React

  •        16

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.

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.

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.

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.

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.

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.

unistore - 🌶 650b state container with component actions for Preact & React

  •    Javascript

A tiny ~650b centralized state container with component bindings for Preact & React. This project uses node and npm. Go check them out if you don't have them locally installed.

react - 🔼 UI-Router for React

  •    TypeScript

UI-Router provides extremely flexible, state based routing to the React ecosystem. Routing frameworks for SPAs update the browser's URL as the user navigates through the app. Conversely, this allows changes to the browser's URL to drive navigation through the app, thus allowing the user to create a bookmark to a location deep within the SPA.