Quick Start

npm install --save @xstate-ninja/react xstate-ninja @xstate/react xstate

To track state machines in your project, do this:

import { useInterpret } from '@xstate-ninja/react'

function App() {
  const service = useInterpret(machine, { devTools: true })
}

The useMachine hook is available too:

import { useMachine } from '@xstate-ninja/react'

function App() {
  const [state, send, service] = useMachine(machine, { devTools: true })
}

Install the browser extension, open browser devtools (F12) and select the XState panel.