xstate-sync-to-context

Installation

yarn add xstate-sync-to-context

Usage

This small lib brings the syncToContext proposal to XState. This allows you to sync 'props' into context in a predictable, concise way:

import { useMachine } from 'xstate-sync-to-context';
import { machine } from './machine';

// useQuery, for instance from react-query or useSWR
const [result] = useQuery();

const [state] = useMachine(machine, {
  syncToContext: {
    data: result.data,
  },
});

syncToContext updates your context via an event: xstate.update.syncToContext. You can listen to the event manually to configure its behaviour:

import { createMachine } from 'xstate';

const machine = createMachine({
  on: {
    'xstate.update.syncToContext': {
      actions: (context, event) => {
        console.log(event.props);
      },
    },
  },
});

You can only import useMachine and useInterpret from xstate-sync-to-context - other imports need to be grabbed from @xstate/react

Proposal

If you like this proposal, check out the PR to XState Core if you want to bring it into core.