react-stepzilla

react stepzilla

is a multi-step, wizard component for sequential data collection. It basically lets you throw a bunch of react components at it (data forms, text / html components etc) and it will take the user through those components in steps. If it's a data-entry form it can tigger validation and only proceed if the data is valid.

what does it do?

• something like this of course:

better yet, have a look at a live example

:+1: :sparkles: :camel: :tada: :rocket: :metal: :octocat:

Full example usage code is available in the src/examples directory. Have a look at a live working version here

get started

• run

npm install --save react-stepzilla

• require into your project via

var StepZilla = require('react-stepzilla')

• define the list of all the components you want to step through. The name indicates the title of the UI step and component is what loads.

const steps =
    [
      {name: 'Step 1', component: <Step1 />},
      {name: 'Step 2', component: <Step2 />},
      {name: 'Step 3', component: <Step3 />},
      {name: 'Step 4', component: <Step4 />},
      {name: 'Step 5', component: <Step5 />}
    ]

• and now render it out somewhere in your app

    <div className='step-progress'>
        <StepZilla steps={steps}/>
    </div>

• pass in following options as well if you want to customise it further

// hide or show Next and Previous Buttons at the bottom
showNavigation: true | false

// disable or enable the steps UI navigation on top
showSteps: true | false

// disable or enable onClick step jumping from the UI navigation on top
stepsNavigation: true | false

// show or hide the previous button in the last step (maybe the last step is a thank you message and you don't want them to go back)
prevBtnOnLastStep: true | false

// dev control to disable validation rules called in step components **
dontValidate: true | false

// by default if you hit the Enter key on any element it validates the form and moves to next step if validation passes. Use this to prevent this behaviour
preventEnterSubmission: true | false

// specify what step to start from in the case you need to skip steps (send in a 0 based index for the item in the steps array. e.g. 2 will load <Step3 /> initially)
startAtStep: [stepIndex]

// specify what the Next button text should be in the step before the last (This is usually the last "Actionable" step. You can use this option to change the Next button to say Save - if you save the form data collected in previous steps)
nextTextOnFinalActionStep: "Save"

example options usage:

<div className='step-progress'>
    <StepZilla steps={steps} stepsNavigation={false} prevBtnOnLastStep={false} startAtStep=2 />
</div>

• ** if one of your components is a form that requires validation before moving to the next component, then that component needs to implement a isValidated() public method which validates the form and returns true/false if the data is valid. For an e.g. on this have a look at the src/examples/Step2 component.

• ** validation can also be Async and therefore Promise based. This is useful if you do server side validation or you want to save data to a server and only proceed if it was a success. For an e.g. on this have a look at the src/examples/Step3 component.

• also if you want some default style, copy the source from src/css/main.css code into your project (the above look in the picture also requires bootstrap)

jumpToStep() utility

• stepzilla injects an utility method called jumpToStep as a prop into all your react step components
• this utility methods lets you jump between steps from inside your react component e.g. this.props.jumpToStep(2) will jump to your 3rd step (it uses a zero based index)
• check out src/examples/Step3 for an actual usage example
• important!! this jumpToStep() utility method will not validate data! so use with caution. its only meant to be a utility to break from the standard flow of steps

dev

• all node source is in src/main.js
• you need to install dependencies first npm install
• make any changes and run npm run build to transpile the jsx into dist
• the transpilation is run as an auto pre-publish task so it should usually be up to date when consumed via npm
• npm run build-example builds and packs the example app into the 'docs' folder so it can be accessed via ghpages

run and view example in browser

A full example is found in the src/examples directory.

• run npm install
• then run npm run example
• then go to http://localhost:8080/webpack-dev-server/src/examples/index.html in your browser
• enjoy

tests

• tests are written in the mocha, chai, sinon, enzyme stack
• located in the 'tests' folder and supports es6
• run the npm run test command run tests
• run the npm run test:watch command run test in watch mode

code test coverage

• test coverage is done via istanbul
• run the npm run test:coverage command to generate full coverage report (shown in terminal and as lcov report in coverage directory)
• all code is run against coverage, not just the unit tested modules
• test coverage improvement is currently a work in progress

Current coverage sitting at v4.0.0:

Statements   : 50.35% ( 72/143 ), 6 ignored
Branches     : 43.8% ( 53/121 ), 20 ignored
Functions    : 72.97% ( 27/37 ), 11 ignored
Lines        : 28.87% ( 28/97 )

dev todo

• write the tests
• improve code coverage

known issues

change log

• 4.0.0
  • step validation via isValidated() now also supports async validation via Promises
• 3.1.0
  • new dev task build-example added, which packs the example app into 'docs' so we can use ghpages
• 3.0.1
  • fixes #7. - dist left out so npm install don't work
• 3.0.0
  • major revamp of logic to deal with validation bugs from stepsNavigation (fixes #6). Also complete revamp of example app to be a fully working sample
• 2.0.1
  • bug with handleKeyDown, as we capture enter if preventEnterSubmission=true, then onEnter the page refreshes
• 2.0.0
  • updated core code to full es6
• 1.9.3
  • added code coverage and testing
  • added btn-prev and btn-next classes to footers
• 1.9.2
  • updated the example to show how a save to server via AJAX can be handled
• 1.9.1
  • updated the example to show nextTextOnFinalActionStep being used
• 1.9.0
  • added the nextTextOnFinalActionStep option
• 1.8.0
  • added the startAtStep option
• 1.7.0
  • fixed the example and made it so you can run it via the browser
• 1.6.0
  • added preventEnterSubmission option to prevent moving to next step if enter is hit
• 1.5.0
  • update to improve showSteps. prevent UI elements from completed rendering
• 1.4.0
  • added the option showSteps which hides the top steps if needed
• 1.3.0
  • added the options showNavigation, stepsNavigation, prevBtnOnLastStep, dontValidate
• 1.2.0
  • fixed issue when when consumed via npm the jsx was causing a build error on the host project. Its not transpiled via babel into dist
• 1.0.0
  • initial working version