:sparkles: A simple wizard for React.

react-redux-wizard Build Status npm version

A simple wizard for React.

This component allows you to represent the flow of a wizard with JSX.

NOTE: I have not worked on an integration with a React router, so if you require deep-linking it’s not quite ready. It is however completely functional for wizards within modals, and for small sign-up wizards, etc. Once react-router#v4 is stable I should be able to use Match#render and Router.transitionTo to get deep linking working again.


import React from 'react'
import { Wizard, Step, match } from 'react-redux-wizard'

const StepOne = ({ name, previous, next }) =>
  <div onClick={next}>{name}</div>
const StepTwo = ({ name, previous, next }) =>
  <div onClick={next.bind(null, { formValue: Math.random() > 0.5 ? 'extra-flow' : null })}>{name}</div>
const StepThree = ({ name, previous, next }) =>
  <div onClick={previous}>{name}</div>

function SomeFormWizard () {
  return (
    <Wizard name="SomeFormWizard">
      <Step name="step-1" component={StepOne} next="step-2" />
        next={match('/formValue', {
          'step-2.5': 'extra-flow', /* stepName <- value*/
          'step-3': null /* stepName <- value*/
      <Step name="step-2.5" component={StepTwo} next="step-3" />
      <Step name="step-3" component={StepThree} />

export default SomeFormWizard


yarn add react-redux-wizard



Your root reducer should use the reducer exported by this module against its wizards key.


<Wizard name={string}>{...steps}</Wizard>

<Step name={string} component={YourReactComponent} previous={string} next={string|StepPredicate|StepFn} />

StepPredicate is an Array<{ predicate: JsonPredicate, to: string }> where JsonPredicate follows the JSON Predicate spec. match(string, StepNameToValues) is just sugar for generating these predicates when given some Step names and the associated values to check for at a pathName.

We can pass a functions in but we really shouldn’t as doing so means that the store can no longer be fully serialized. However, it is possible:

StepFn has the form (values: KeyValueObject, wizardState: KeyValueObject) => ?string and can be used to pick the next step depending on either the values emitted from a component, or some of the wizard’s internal state.

<YourReactComponent previous={() => void} next={(values: KeyValueObject) => void} />

<YourReactComponent> should receive two functions previous and next.

previous will take zero arguments and go to the previous step, while next expects a values key-value object.

These are different functions from the ones you passed into <Step>.

Related Repositories



:sparkles: A simple wizard for React. ...