ShMcK

type Props = {
  load(): void,
}

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

const actions = {

ShMcK

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

ShMcK

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

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

ShMcK

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

export default withStatechart(alarmMachine)(AlarmClock)

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 { State, withStatechart } from 'react-automata'
import alarmMachine from './alarmMachine'

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

ShMcK

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

const AlarmClock = () => (
 <State
  value='Ringing'
  render={(ringing) => (
    <Clock ringing={ringing} />
  )}
 />

ShMcK

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

const AlarmClock = () => (
  <>
    <Action show='ring'>
      <Ringing />
    </Action>
    <Clock />
  </>

ShMcK

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

class AlarmClock extends React.Component {
  state = {
    ringing: false
  }
  startRing = () => {
    this.setState({ ringing: true })
  }

ShMcK

import { Machine } from 'xstate'
import { createStatefulMachine } from '@avaragado/xstateful'
import alarmMachine from './alarmMachine'

const alarm = createStatefulMachine({
  machine: alarmMachine
})

alarm.init()