Package Exports
- react-form-wizard
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-form-wizard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-form-wizard comes bundled with bootstrap
example forms
Available Scripts
In the project directory, you can run:
npm install react-form-wizard
Usage in component.
import FormWizard from "react-form-wizard"
state = {
totalSteps: 4,
steps: {
1: "Add Profile Information",
2: "Add Contact Details",
},
stepsData: {
1: {
input: {
text: {
total: 2,
names: [
{ id: "fullname", label: "Fullname", required: true },
{ id: "lastname", label: "Lastname" },
],
required: true,
},
},
},
2: {
input: {
text: {
total: 2,
names: [
{ id: "country", label: "Country" },
{ id: "region", label: "Region" },
],
},
email: {
total: 1,
names: [{ id: "contact", label: "Contact" }],
},
},
},
},
};
render () {
return (
<div>
<FormWizard
steps={this.state.steps}
stepsData={this.state.stepsData}
totalSteps={this.state.totalSteps}
data={this.getformValues}
submit={this.getformValues}
/>
</div>
)
}The component requires the following props
- steps = {number of steps}
- stepsData = {data to be shown on form e.g inputs, their names and types}
- totalSteps = {number of steps}
The component also return the following as props
- data = {returns current form values}
- submit = {returns final form values}
This project will continue to be maintained and it is expected to include more features.