@bemedev/middleware-zustand-xstate-fsm v0.1.2

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

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

Usage

import create from 'zustand';
import { createMachine } from '@xstate/fsm';
import middleware from '@bemedev/middleware-zustand-xstate-fsm';

// create your machine
const machine = createMachine({
  id: 'toggle',
  states: {
    // ...
  },
});

// create a hook using the @xstate/fsm middleware
const useStore = create(middleware(machine));

// use the store in your components
const App = () => {
  const { state, send, service } = useStore();

  return <div>{state.value}</div>;
};

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

Inspired by @biowaffeln

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