react-steps-wiz

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.