@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:

``bash
npm i xstate @xstate/react
`

2. Import the useMachine hook:

`tsx
import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';

const toggleMachine = createMachine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: {
on: { TOGGLE: 'active' }
},
active: {
on: { TOGGLE: 'inactive' }
}
}
});

export const Toggler = () => {
const [state, send] = useMachine(toggleMachine);

return (
send({ type: 'TOGGLE' })}>
{state.value === 'inactive'
? 'Click to activate'
: 'Active! Click to deactivate'}

);
};
``