ShMcK

import { State, withStatechart } from 'react-automata'
import alarmMachine from './alarmMachine'

const AlarmClock = () => (
 <>
   <State value='Ringing'>
     <Clock ringing />
   </State>
   <State value=['Idle', 'Snoozing']>
     <Clock />

ShMcK

import { withStatechart } from 'react-automata'
import alarmMachine from './alarmMachine'

const AlarmClock = ({ machineState }) => (
   <Clock ringing={machineState.value === 'Ringing'}/>
)

export default withStatechart(alarmMachine)(AlarmClock)

ShMcK

import { withStatechart } from 'react-automata'
import alarmMachine from './alarmMachine'
import AlarmClock from './components/AlarmClock'

export default withStatechart(alarmMachine)(AlarmClock)

ShMcK

let currentState = 'Idle'
const nextState = alarmMachine
 .transition(currentState, 'ALARM_TRIGGERED')

nextState.value   // 'Ringing'
nextState.actions // ['ring']
nextState.events  // ['SNOOZE', 'CANCEL']

ShMcK

import { Machine } from 'xstate'
const Alarm = {
  Alarm: {
      initial: 'Ringing',
      on: { CANCEL: 'Idle' },
      states: {
        Ringing: {
          on: { SNOOZE: 'Snoozing' },
          onEntry: ['startRing'],
          onExit: ['stopRing'],

ShMcK

type Props = {
  load(): void,
}

type States = {
  mode: 'loading' | 'loaded' | 'errors',
  data: any,
}

const actions = {

ShMcK

const events = {
  STOP: 'Stopped',
  PLAY: 'Playing'
}

ShMcK

class Walkman extends React.Component {
 transition = (event) => {
   const preventTapeJam = /* ... */
   const shouldEject = event === 'STOP' && this.state.current === 'Stopped'
 
   if (!preventTapeJam) {
     /* … */
   } else if (shouldEject) {
     this.setState({ current: events.EJECT })
   }

ShMcK

 const events = {
   STOP: 'Stopped',
   PLAY: 'Playing',
   REWIND: 'Rewinding',
   FASTFORWARD: 'FastForwarding',
 }

class Walkman extends React.Component {
 transition = (target) => {
   const preventTapeJam = 

ShMcK

const events = {
   STOP: 'Stopped',
   PLAY: 'Playing',
   REWIND: 'Rewinding',
   FASTFORWARD: 'FastForwarding',
 }

class Walkman extends React.Component {
 state = {
   current: events.STOP,