Minimal State Machine Hook For React

Description:

A tiny yet full-featured state machine hook for React.

How to use it:

1. Install and import.

# NPM
$ npm i @cassiozen/usestatemachine

import useStateMachine from '@cassiozen/usestatemachine';

2. Basic usage.

function App() {
  const [machine, send] = useStateMachine<{ time: number }>({ time: 0 })({
    initial: 'idle',
    verbose: true,
    states: {
      idle: {
        on: {
          START: {
            target: 'running',
          },
        },
        effect(_, update) {
          update(() => ({ time: 0 }));
        },
      },
      running: {
        on: {
          PAUSE: 'paused',
        },
        effect(_, update) {
          const interval = setInterval(() => {
            update(context => ({ time: context.time + 1 }));
          }, 100);
          return () => clearInterval(interval);
        },
      },
      paused: {
        on: {
          RESET: 'idle',
          START: {
            target: 'running',
          },
        },
      },
    },
  });
  return (
    <div className="StopWatch">
      <div className="display">{formatTime(machine.context.time)}</div>
      <div className="controls">
        {machine.nextEvents.includes('START') && (
          <button type="button" onClick={() => send('START')}>
            Start
          </button>
        )}
        {machine.nextEvents.includes('PAUSE') && (
          <button type="button" onClick={() => send('PAUSE')}>
            Pause
          </button>
        )}
        {machine.nextEvents.includes('RESET') && (
          <button type="button" onClick={() => send('RESET')}>
            Reset
          </button>
        )}
      </div>
    </div>
  );
}

Preview: