βοΈ π²
A React component that use the mchine library to use state machine in your application.
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 if
s and else
s and make the code more maintanable.
npm install react-mchine
yarn add react-mchine
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;
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>
)
}
}
stateMachine
: A mchine schema definition of your state machine (more information here)
C => WC
: A function to create the component C
as a wrapped component WC
with the state machine properties
Component used to show the children with the matched state passed on the is
property
is
: [string] State name chose that will show the children when the active state of the state machine match with this property
This will show the <LoadingSpinner />
component only when the current state is loading
<State is="loading">
<LoadingSpinner />
</State>
React Mchine use mchine under the hood, if you want to use xstate instead you could use react-automata