Helpers.js

export function Transition
({
  transitionName,
  payload = {}
}) {
  const transition = useMachineTransition(transitionName)

  useEffect(() => {
    transition.execute(payload)
  })

  return (
    <>
      {transition.loading && <p>Loading...</p>}
      {transition.error && <p>{transition.error.message}</p>}
    </>
  )
}

export function State ({
  is,
  children,
}) {
  const {
    state,
  } = useMachineState()

  const matches = Array.isArray(is) ? is : [is]
  const isMatch = (a) => a === state

  if (!matches.some(isMatch)) {
    return null
  }

  return children
}