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: 2,
steps: {
1: "Add Profile Information",
2: "Add Contact Details",
},
stepsData: {
1: {
input: {
text: {
details: [
{ id: "fullname", label: "Fullname", required: true },
{ id: "lastname", label: "Lastname" },
],
required: true,
},
email: {
total: 1,
details: [{ id: "contact", label: "Contact" }],
},
select: {
details: [
{
id: "vat_status",
label: "VAT Registered",
options: ["Yes", "No"],
placeholder:"Select VAT status"
},
],
},
textarea: {
details: [
{
id: "termsAndAgreement",
label: "Terms and Agreement",
rows: "5",
cols: "30",
defaultValue: "This is our terms and agreement",
readOnly:true
},
],
},
checkbox: {
details: [
{
id: "acceptterms",
label: "I have read and accepted the agreement",
},
],
},
},
},
2: {
input: {
text: {
details: [
{ id: "country", label: "Country" },
{ id: "region", label: "Region" },
],
},
},
},
},
};
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 = {each step with title or description }
- stepsData = {data to be shown on form e.g inputs, their names and types}
- totalSteps = {total 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.