React Quick Start

Installation

Install the library:

npm install statecharts.sh

Basic Usage

The useStateChart hook connects a statechart to your component:

import { chart } from "statecharts.sh";
import { useStateChart } from "statecharts.sh/react";

const toggle = chart({
  context: {},
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
});

function Toggle() {
  const { state, send, matches } = useStateChart(toggle);

  return (
    <button onClick={() => send("TOGGLE")}>
      {matches("active") ? "ON" : "OFF"}
    </button>
  );
}

Return Value

The hook returns:

Property	Type	Description
state	IStateSnapshot	Current state with value and context
send	(event) => void	Send events to the machine
matches	(stateValue) => boolean	Check current state

Next Steps

• See Patterns for common usage patterns
• Read the Hook API for full options