@xstate/react

This package contains utilities for using XState with React.

• Read the full documentation in the XState docs.
• Read our contribution guidelines.

Quick start

1. Install xstate and @xstate/react:

1npm i xstate @xstate/react

2. Import the useMachine hook:

1import { useMachine } from '@xstate/react';
2import { createMachine } from 'xstate';
3
4const toggleMachine = createMachine({
5  id: 'toggle',
6  initial: 'inactive',
7  states: {
8    inactive: {
9      on: { TOGGLE: 'active' }
10    },
11    active: {
12      on: { TOGGLE: 'inactive' }
13    }
14  }
15});
16
17export const Toggler = () => {
18  const [state, send] = useMachine(toggleMachine);
19
20  return (
21    <button onClick={() => send({ type: 'TOGGLE' })}>
22      {state.value === 'inactive'
23        ? 'Click to activate'
24        : 'Active! Click to deactivate'}
25    </button>
26  );
27};