Black Lives Matter. Support the Equal Justice Initiative.


Fast 1kB functional library for creating Finite State Machines

# preact-robot

Table of Contents

The preact-robot package provides the useMachine hook for use with Preact.

import { createMachine, state, transition } from 'robot3';
import { h, render } from 'preact';
import { useMachine } from 'preact-robot';

const machine = createMachine({
off: state(
transition('toggle', 'on')
on: state(
transition('toggle', 'off')

function App() {
const [current, send] = useMachine(machine);

return (
<div>State: {}</div>
<button onClick={() => send('toggle')}>

render(<App />, document.querySelector('#app'));

# Installation

Available as preact-robot on npm:

npm install preact-robot --save

Or through Yarn:

yarn add preact-robot


useMachine(machine, initialContext)

Includes the arguments:

Returns the following as an array:

[current, send, service]

Normally only the current and send properties are needed to be used.

Here the state name is logged, as well as data from the context.

const [current, send] = useMachine(machine);
const { userName } = current.context;

console.log('Current state:',;
console.log('Username from context', userName);

The send property is used to send events into the state machine:

const [current, send] = useMachine(machine);

return (
<button onClick={() => send('toggle')}>

# License

BSD 2-Clause