Just a function.. middleware({machine})

@bemedev/middleware-zustand-xstate-fsm

This middleware allows you to easily put your @xstate/fsm state machines into a global zustand store.

Installation

1{npm install, pnpm add, yarn add} @bemedev/middleware-zustand-xstate-fsm zustand xstate

Usage

1import create from 'zustand';
2import { createMachine } from '@xstate/fsm';
3import middleware from '@bemedev/middleware-zustand-xstate-fsm';
4
5// create your machine
6const machine = createMachine({
7  id: 'toggle',
8  states: {
9    // ...
10  },
11});
12
13// create a hook using the @xstate/fsm middleware
14const useStore = create(middleware(machine));
15
16// use the store in your components
17const App = () => {
18  const { state, send, service } = useStore();
19
20  return <div>{state.value}</div>;
21};

For tests, issues, forks, go to repo, go here

Inspired by @biowaffeln

Happy coding 😊❤️😊👨‍💻❤️✅!!