statebot
    Preparing search index...

    Function useStatebot

    • For hooking-into Statebots that have life-cycles independent of the components that use them, useStatebot:

      You can play around with this one in a CodeSandbox.

      Parameters

      Returns string

      The current state of the machine.

       import m from 'mithril'
      import { withHooks as MithrilComponent } from 'mithril-hooks'

      import { Statebot } from 'statebot'
      import { useStatebot } from 'statebot/hooks/mithril'

      let loadMachine = Statebot('loader', {
      chart: `
      idle ->
      waiting ->
      loaded | failed ->
      idle
      `
      })

      loadMachine.performTransitions(({ emit }) => ({
      'idle -> waiting': {
      on: 'start-loading',
      then: () => {
      // Fail half the time for this demo
      let fail = Math.random() > 0.5
      setTimeout(() => {
      fail ? emit('error') : emit('success')
      }, 1000)
      }
      },
      'waiting -> loaded': {
      on: 'success'
      },
      'waiting -> failed': {
      on: 'error'
      }
      }))

      let { Enter, Emit, inState } = loadMachine

      let LoadingButton = MithrilComponent(() => {
      let state = useStatebot(loadMachine)

      return m(
      'button',
      {
      className: state,
      onclick: Emit('start-loading'),
      disabled: !inState('idle')
      },
      inState('idle', 'Load'),
      inState('waiting', 'Please wait...'),
      inState('loaded', 'Done!'),
      inState('failed', 'Whoops!')
      )
      })

      let ResetButton = MithrilComponent(() => {
      return m(
      'button',
      {
      onclick: Enter('idle')
      },
      'Reset'
      )
      })