React Machinery

🔥 React Machinery provides a simple to use, component based approach to state machines in react.
Alternatives To React Machinery
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Zag2,69029a day ago100July 15, 202222mitTypeScript
Finite state machines for building accessible design systems and UI components.
React Automata1,2931344 years ago27August 27, 201814mitJavaScript
A state machine abstraction for React
Little State Machine1,269
4 months ago8mitTypeScript
📠 React custom hook for persist state management
React46341162 days ago29July 27, 202120mitTypeScript
🔼 UI-Router for React
React Transition State26242 days ago21September 07, 20225mitJavaScript
Zero dependency React transition state machine
Use Machine222
2 years ago12February 21, 20204mitTypeScript
React Hook for using Statecharts powered by XState. use-machine.
Xstate Examples129
a day ago3TypeScript
Practical examples of statechart-based solutions with xstate.
Frontend Masters React Workshop118
2 months ago1mitJavaScript
Code for the Frontend Masters React State Modeling Workshop
3 days ago15February 20, 20221mitTypeScript
Framework-agnostic state management library designed for simplicity and scalability ⚛
React Machinery10112 years ago6July 04, 201811mitJavaScript
🔥 React Machinery provides a simple to use, component based approach to state machines in react.
Alternatives To React Machinery
Select To Compare

Alternative Project Comparisons

React Machinery

npm version license CircleCI

⚙️ State Machine Modelling for React


🔥 React Machinery provides a simple to use, component based approach to state machines in react.

Describe your states, transitions, and which component each renders, and plug it into the StateMachine component. It accepts two extra functions; one for getting the current state name and one for setting it. This allows your app to flexibly use and swap out different ways of storing data - be it in component state, redux, mobx, whatever.


Examples of how the following state diagram can be implemented in both vanilla react and using redux can be found in the examples folder.

State diagram of code below


# with yarn
yarn add react-machinery

# or with npm
npm i react-machinery



All props for the StateMachine component are required.



A function returning the current state name, stored somewhere like a react component state, or in redux.



A function that updates the current state, stored somewhere like a react component state, or in redux.


Array of state definitions

A state definition is a plain javascript object with the following properties:

  // This name corresponds to the one coming from getCurrentState() and
  // being set by setNewState()
  name: 'State Name',

  // Array of plain objects that describe automatic transitions
  // These are evaluated after a transition and when props change
  autoTransitions: [
    // A transition object must contain two properties:
    // test, which is a function that recieves the StateMachine data, and returns true if a state change should take place
    // newState, which is the name of the state to transition to when the test function returns true
      test: data => data === 'expected for state change',
      newState: 'Name of new state'

  // This is a list of states that can be transitioned to from the current state using the transitionTo
  // prop passed to a state component. Trying to use transitionTo with a state not specified in this list
  // will throw an error. This list, together with any 'newState's described in autoTransitions form the
  // full set of valid transitions for this state.
  validTransitions: [
    'Name of valid state'

  // beforeRender is an optional function that can run some code before this states component
  // is rendered. For anything sufficiently complex however, it's better to use a react class
  // component and take advantage of lifecycle hooks
  beforeRender: (data) => {

    // One of the following two properties must be implemented:

  // a render prop that recieves the 'props' object supplied to the StateMachine
  // the props object will also include a 'transitionTo' function and a 'currentState' string
  render: (data) => {
    return <SomeComponent propUsingStateName={data.currentState} {} />

  // Or just a regular react component
  component: SomeReactComponent



An object contains data that defines all the states in the state machine. This data is supplied to the component rendered by any state, to test functions in autoTransitions. If a render prop is used for the state, then the props are passed as the argument, along with a transitionTo function and currentState name.


The awesome logo was designed by @ayushs08, who graciously provided under CC BY 3.0. Many thanks!

Popular State Machine Projects
Popular Reactjs Projects
Popular Control Flow Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
State Machine