xstate-react-calculator
An iPhone-style calculator built with React and XState — an experiment in modeling UIs with finite state machines.
- react
- xstate
- state-machines
- experiment
xstate-react-calculator
xstate-react-calculator is an iPhone-style calculator built with React and XState. The point wasn't the calculator — it was using the exercise to feel out what it's like to model a whole UI as a finite state machine instead of with scattered booleans and useReducer.
It's exactly the kind of project XState handles better than useState: there are illegal states (you can't apply two operators in a row without a number between them), history-dependent transitions, and enough control logic that the naive flag-and-conditional version goes unreadable fast.
Archived in 2022 — it was a one-shot experiment, not something I'm maintaining. Stays up as a reference I can re-read whenever I need to remember how to draft a statechart from scratch.
For more, see the README on GitHub.