use-machine
Use Statecharts in React powered by XState, using the useMachine
hook. This is a minimalistic implementation (just 30 lines) that integrates React and XState.
Install it with: npm i use-machine
See --> the live example here!.
Let's build something with it:
const incAction = const machineConfig = initial: 'Off' context: counter: 0 states: Off: on: Tick: target: 'On' actions: incAction 'sideEffect' On: on: Tick: target: 'Off' actions: incAction const MachineContext = React { const machine = { machine } return <div className="App"> <span style= backgroundColor: machinestate ? 'red' : 'yellow' > machinestate ? 'Off' : 'On' </span> <button onClick=sendTick>Tick</button> Pressed: machinecontextcounter times <MachineContextProvider value=machine> <div className="childs"> <Child /> </div> </MachineContextProvider> </div> } { const machine = return <div> <div> Child state: machinestate ? 'Off' : 'On' </div> <div>Child count: machinecontextcounter</div> <OtherChild /> </div> } { const machine = { machine } return <div> <div> OtherChild state: machinestate ? 'Off' : 'On' </div> <div>OtherChild count: machinecontextcounter</div> <button onClick=sendTick>Tick 2</button> </div> } const rootElement = documentReactDOM
TypeScript
This library is written in TypeScript, and XState too, so we have excellent support for types.
Example:
ReactDOM.renderApp /, rootElement