Skip to main content

@idearium/react-state-router

The Idearium React state router component for XState.

Installation​

$ yarn add @idearium/react-state-router

Usage​

To use this component, first create a react context and use the service created through xstate for the provider value.

import ReactContext from 'context/reactContext';
import xstatemachine from 'machines/xstatemachine';
import { useInterpret } from '@xstate/react';

const Component = ({ children }) => {
    const service = useInterpret(xstatemachine);

    return (
        <ReactContext.Provider value={{ service }}>
            {children}
        </ReactContext.Provider>
    );
};

Then inside your component, import the state router component and context you created above.

import StateRouter from '@idearium/react-state-router';
import ReactContext from 'context/reactContext';
import Step1 from 'steps/step1';
import Step2 from 'steps/step2';
import Step3 from 'steps/step3';

const StateRouterComponent = () => (
    <StateRouter context={ReactContext}>
        <Step1 when="step1" />
        <Step2 when="step2" />
        <Step3 when="step3" />
    </StateRouter>
);

export default StateRouterComponent;

The state router will now automatically display the component when the when attribute matches the xstate state.