Black Lives Matter. Support the Equal Justice Initiative.


Fast 1kB functional library for creating Finite State Machines

# haunted-robot

Table of Contents

The haunted-robot package provides the useMachine hook for use with Haunted.

import { createMachine, state, transition } from 'robot3';
import { component } from 'haunted';
import { html } from 'lit-html';
import { useMachine } from 'haunted-robot';

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

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

return html`
<div>State: {}</div>
<button @click=
${() => send('toggle')}>

customElements.define('my-app', component(App));

# Installation

Available as haunted-robot on npm:

npm install haunted-robot --save

Or through Yarn:

yarn add haunted-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 html`
<button @click=
${() => send('toggle')}>

# License

BSD 2-Clause