Neoclassical Programming Multitude

    react-redux-wizard

    0.2.0 • Public • Published

    react-redux-wizard Build Status npm version

    A simple wizard for React.

    Example

    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" />
          <Step
            name="step-2"
            component={StepTwo}
            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} />
        </Wizard>
      )
    }
     
    export default SomeFormWizard

    Install

    yarn add react-redux-wizard

    API

    Reducer

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

    Component

    <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>.

    Install

    npm i react-redux-wizard

    DownloadsWeekly Downloads

    411

    Version

    0.2.0

    License

    Unlicense

    Last publish

    Collaborators

    • sebinsua