ShMcK

import AlarmMachine from './statefulAlarmMachine'

const Clock = () => (
  <AlarmMachine
    render={({ extstate, setextstate }) => (
      <TimeDisplay time={extstate.time} />
    )}
  />
)

ShMcK

import AlarmMachine from './statefulAlarmMachine'

const Ringing = () => (
  <AlarmMachine cond={({ state, exstate )} => (
    state === 'Ringing' && exstate.ringCount < 5
  )}>
   <PlayRinging />
  </AlarmMachine>
)

ShMcK

import { createStatefulMachine, Reducer } from '@avaragado/xstateful'
import alarmMachine from './alarmMachine'

const initialState = {
  alarmTrigger: +new Date() + 10000
}

const reducer = Reducer.map({
  alarmSet: Reducer.update(({ action, extstate }) => ({
    alarmTrigger: action.time,

ShMcK

import AlarmMachine from './statefulAlarmMachine'

const AlarmClock = () => (
  <>
    <AlarmMachine.Activity is='startRing'>
      <Ringing />
    </AlarmMachine.Activity>
    <Clock>
  </>
)

ShMcK

<AlarmMachine.Provider>
  <>
    <AlarmClock />
    <AlarmClock />
  <>
</AlarmMachine.Provider>

ShMcK

import { createReactMachine } from '@avaragado/xstateful-react'
import alarm from './statefulAlarmMachine'

const AlarmMachine = createReactMachine(alarm)

export default AlarmMachine

ShMcK

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

const alarm = createStatefulMachine({
  machine: alarmMachine
})

alarm.init()

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

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

ShMcK

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

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