# 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: {current.name}</div>
<button @click=${() => send('toggle')}>
Toggle
</button>
`;
}
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
# API
useMachine(machine, initialContext)
Includes the arguments:
machine
: A Robot state machine.initialContext
: An object that will be passed to the context function.
Returns the following as an array:
[current, send, service]
current
: A state object with the properties:service
: A service like you normally get from interpret.
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:', current.name);
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')}>
Toggle
</button>
`;