Skip to content

βš›οΈ 🎲 A React component to use with mchine

Notifications You must be signed in to change notification settings

HenriqueLimas/react-mchine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

103f976 Β· Sep 13, 2018

History

12 Commits
Sep 2, 2018
Aug 19, 2018
Aug 19, 2018
Aug 19, 2018
Aug 19, 2018
Aug 19, 2018
Aug 19, 2018
Sep 13, 2018
Aug 19, 2018
Sep 5, 2018
Aug 19, 2018
Aug 19, 2018
Aug 29, 2018

Repository files navigation

code style: prettier

βš›οΈ 🎲

React Mchine

A React component that use the mchine library to use state machine in your application.

Why?

A state machine can be hard at first to use and understand, but using it as a React component could it be easier to apply in your application. State machine are sexy and it will change how you think and develop a Front-end application. Think more on your view's state instead of his transactions, this will reduce a lot the ifs and elses and make the code more maintanable.

Install

npm

npm install react-mchine

Yarn

yarn add react-mchine

How to use

Wrapping your Component

Wrap your component with a state machine schema using the withMchine function:

import React from 'react';
import { withMchine } from 'react-mchine';
import stateMachine from './myStateMachine';

class Component extends React.Component {
  ...
}

export default withMchine(stateMachine)(Component);

The wrapped component will have a prop called transition that is a function that you can use to change states.

class Component extends React.Component {
  handleLogin = () => {
    this.props.transition('login')
  }
}

This is an example of the state machine schema:

// myStateMachine.js

const stateMachine = {
  initial: 'idle',
  states: {
    idle: {
      events: {
        login: {
          target: 'loading'
        }
      }
    },
    loading: {
      events: {
        success: {
          target: 'idle'
        }
      }
    }
  }
};

export default stateMachine;

Matching states

Inside your Wrapped component now you can use the <State /> component to match the active state of the machine:

...
import { withMchine, State } from 'react-mchine';

class Component extends React.Component {
  ...
  render() {
    return (
      <div>
        <State is="idle">
          Waiting you to click on
          <button onClick={this.handleLogin}>Login</button>
        </State>

        <State is="loading">
          <SomeFancyLoadingSpinner />
        </State>
      </div>
    )
  }
}

API

withMchine

args
  • stateMachine: A mchine schema definition of your state machine (more information here)
returns

C => WC: A function to create the component C as a wrapped component WC with the state machine properties


State

Component used to show the children with the matched state passed on the is property

props
  • is: [string] State name chose that will show the children when the active state of the state machine match with this property
Example

This will show the <LoadingSpinner /> component only when the current state is loading

<State is="loading">
  <LoadingSpinner />
</State>

Note

React Mchine use mchine under the hood, if you want to use xstate instead you could use react-automata

About

βš›οΈ 🎲 A React component to use with mchine

Resources

Code of conduct

Stars

Watchers

Forks

Packages

No packages published