/xstate-flow-demo

A proof of concept showing XState as a conditional routing tool

Primary LanguageJavaScript

A proof of concept showing XState as a conditional routing tool. Routing includes conditional logic based on form state.

Demo

Running

npm install
npm run dev

Visit localhost:3000

Most relevant files

React hook responsible for maintaining a "routing machine." Establishes all routes in a flow and the logic determining which route the user should be sent to next. Exports a getNextRoute method, along with the XState machine. This could be refactored so that the routes definition lives elsewhere.

Uses the routing machine hook. Includes the "Next" button's click handler, which calls the hook's getNextRoute method and navigates the user to the returned route.

Links