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