Simple react wizard for any html view, form or react component
npm install react-wizard-formThese instructions will install the component on your react project.
What things you need to install the component:
``
npm
To install the react-wizard-form just do:
`
npm install react-wizard-form
To save it into your package.json
`
npm install --save react-wizard-form
This examples will guide you on how to use this component
This example is without the navigation header
##### Your Wizard
Add your views, forms or components as children of the WizardForm in the same order you want them to navigate:
`
// your-form.js
import React from 'react';
import ReactDOM from 'react-dom';
import WizardForm from 'react-wizard-form';
import StepOneForm from './step-one.js';
import StepTwoForm from './step-two.js';
class YourForm extends React.Component {
render() {
return (
)
}
}
const yourFormContainer = document.getElementById('your-form-container');
ReactDOM.render(
yourFormContainer
);
export default YourForm;
`
##### Each Form
To go to the each form, view or component they have to call
`
this.props.nextStep(data);
To go to te previous form call:
`
this.props.previousStep(data);
Where data is an object of any data you want to pass from one form to another.
`
// step-one.js
import React from 'react';
import ReactDOM from 'react-dom';
class StepOneForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
data: this.props.data ? this.props.data : {}
}
}
handleOnNextButtonClicked() {
let data = {}
data.name = this.refs.name;
// Anything else you want to pass add it to data
this.props.nextStep(data);
}
render() {
return (
export default StepOneForm;
`
`
// step-two.js
import React from 'react';
import ReactDOM from 'react-dom';
class StepTwoForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleOnPreviousStep = this.handleOnPreviousStep.bind(this);
// The data from the previous step comes in this.props.data
this.state = {
data: this.props.data,
}
}
handleSubmit() {
// Anything here
}
handleOnPreviousStep() {
let data = this.state.data;
this.props.previousStep(data);
}
render() {
return (
export default StepTwoForm;
`
This example is with the navigation header.
With the header you can navigate to any step using a custom header navigator made by you.
##### Your Wizard
Add your views, forms or components as children of the WizardForm in the same order you want them to navigate
as same as the array of headers.
Each view of the headers needs to have a form property with is to specify (with a string) the name of the corresponded view.
When the header view is clicked the corresponded form will be rendered if this form has the data prop of its data with something,
it will pass it to.
`
// your-form.js
import React from 'react';
import ReactDOM from 'react-dom';
import WizardForm from 'react-wizard-form';
import StepOneForm from './step-one.js';
import StepTwoForm from './step-two.js';
class YourForm extends React.Component {
render() {
return (
Go to step one
Go to step two
const yourFormContainer = document.getElementById('your-form-container');
ReactDOM.render(
yourFormContainer
);
export default YourForm;
`
| Prop | Description | Type |
| --- | --- | --- |
| initialStep (optional) | The step which the wizard will be (0 is the first one) | Number |headers
| (optional) | Array of JSX components corresponding to the header of each form of the wizard | Array |children
| (required) | JSX or Array of JSX components of each form of the wizard | JSX or Array |onStepChanged
| (optional) | Callback that is executed when a step is changed | Func |initAfterMount
| (optional) | Callback that is executed after the wizard is mounted | Func |initBeforeMount
| (optional) | Callback that is executed before the wizard is mounted | Func |headerClass` (optional) | CSS class of the
|
When contributing to this repository, please first discuss the change you wish to make via issue,
email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct, please follow it in all your interactions with the project.
1. Ensure any install or build dependencies are removed before the end of the layer when doing a
build.
2. Update the README.md with details of changes to the interface, this includes new environment
variables, exposed ports, useful file locations and container parameters.
3. Increase the version numbers in any examples files and the README.md to the new version that this
Pull Request would represent. The versioning scheme we use is SemVer.
4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
do not have permission to do that, you may request the second reviewer to merge it for you.
Diego Rafael Mena Hernandez - Initial work* - dieguito12
ISC