xstate-addon

A storybook addon project for xstate (https://github.com/davidkpiano/xstate)

The project is in an early stage. Everyone who is interested in bringing this project forward is welcome to contribute ideas, docs and code.

install

npm i storybook-addon-xstate -D

register

addons.js

import 'storybook-addon-xstate/register';

story

import { WithXStateGraph } from 'storybook-addon-xstate';

<WithXStateGraph
   machine={xstateMachine}
   onTransition={onEvent}
   currentState={currentState}
>
  <TrafficLight light={currentState} />
 </WithXStateGraph>

basic idea