JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 11
  • Score
    100M100P100Q71892F
  • License ISC

React form wizard with minimal configuration. It uses bootstrap css

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

This project was bootstrapped with Create React App. react-form-wizard comes bundle with bootstrap

Available Scripts

In the project directory, you can run:

npm install react-form-wizard

Usage in component.

import FormWizard from "react-form-wizard"

state = { loaded: false, 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 (

) }

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 component will continue to be maintained and it is expected to include more features.

This component is a react component