react-stepzilla

react stepzilla

is a multi step component for data collection via forms and other basic components. It basically lets you throw a bunch of react components at it (data forms, text panels etc) and it will take the user through the forms in steps. If it's a data form it will tigger validation and only proceed if the data is valid.

what does it do?

• something like this of course:

get started

• run

npm install 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 />}
    ]

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

• also if you want some default style, copy the source from src/css/main.css code into your project

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 a auto pre-publish task so it should usually be up to date when consumed via npm

todo

• write the tests

change log

• 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