chlbri/zustand-middleware-xstate

An easy way to integrate XState with your zustand store.

zustand-middleware-xstate

This middleware allows you to easily put your XState state machines into a global zustand store.

installation

npm install zustand-middleware-xstate zustand xstate

usage

import create from "zustand";
import { createMachine } from "xstate";
import xstate from "zustand-middleware-xstate";

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

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

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

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

Or check out the demo for a working example.