1.0.4 • Published 5 years ago
react-steps-wiz v1.0.4
React Steps Wizard
Fast and easy way to create your own wizard. Simply add a unlimited number of steps and input fields. Data is returned as JSON when user has finished the wizard.
Install
npm i react-steps-wiz
Usage
import React, { Component } from 'react';
import Wizard from 'react-steps-wiz';
class App extends Component {
handleSubmit(form) {
console.log(form);
}
render() {
let steps = [
[{
id: 1,
info: 'name',
type: 'text',
placeholder: 'name',
},
{
id: 2,
info: 'telephone',
type: 'number',
placeholder: 'number',
}
],
[{
id: 3,
info: 'city',
type: 'text',
placeholder: 'city',
},
{
id: 4,
info: 'areacode',
type: 'number',
placeholder: 'areacode',
}
]
]
return (
<Wizard
steps={steps}
onSubmit={(form) => this.handleSubmit(form)}
/>
);
}
}
export default App;
Required props
steps
All steps need to be passed to wizard as props as in code above. Note that the wizard takes in any number of steps and any number of input fields within each step.
onSubmit
This binds the wizard to the component that uses it.