Hello, Retomus

Let’s build your first machine and hook it up to a React component in just a few steps.

---

1. Install Retomus

npm install retomus

---

2. Create a Minimal Machine

import { createRetomus, createMachineConfig } from 'retomus';

const retomus = createRetomus();

const counterMachine = retomus.createMachine(
  createMachineConfig({
    id: 'counter',
    status: ['idle', 'active'],
    actions: ['increment', 'decrement', 'reset'],
    transitions: {
      idle: {
        increment: 'active',
        decrement: 'active',
      },
      active: {
        increment: 'active',
        decrement: 'active',
        reset: 'idle',
      },
    },
    actionHandlers: {
      increment: ({ ctx, done }) => {
        ctx.state.count++;
        done();
      },
      decrement: ({ ctx, done }) => {
        ctx.state.count--;
        done();
      },
      reset: ({ ctx, done }) => {
        ctx.state.count = 0;
        done();
      },
    },
    initialStatus: {
      status: 'idle',
    },
    ctx: {
      state: { count: 0 },
    },
  }),
);

---

3. Use in a Component

import React, { CSSProperties } from 'react';

const CounterComponent = ({ counterMachine }) => {
  const count = counterMachine.useState('count');
  const status = counterMachine.useStatus();
  const increment = counterMachine.useAction('increment');
  const decrement = counterMachine.useAction('decrement');
  const reset = counterMachine.useAction('reset');

  return (
    <div style={styles.container}>
      <h2>Status: {status}</h2>
      <p>Count: {count}</p>
      <div style={styles.buttonGroup}>
        <button onClick={increment}>increment</button>
        <button onClick={decrement}>decrement</button>
        <button onClick={reset}>reset</button>
      </div>
    </div>
  );
};

const styles: { container: CSSProperties; buttonGroup: CSSProperties } = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '1rem',
  },
  buttonGroup: {
    display: 'flex',
    justifyContent: 'center',
    gap: '1rem',
  },
};

---

4. Wrap Your App

import { RetomusWrapper } from 'retomus';

const App = () => (
  <RetomusWrapper>
    <CounterComponent counterMachine={counterMachine} />
  </RetomusWrapper>
);

---

Completion!

Status: idle

Count: 0

---

✅ What You Learned

• How to define and create a state machine
• How to hook machine state/actions into React
• How to trigger transitions and update values

---