react-form-stepper-substepper v1.2.2

React form stepper with sub-stepper

"react-form-stepper-substepper" is a versatile React package that simplifies the creation of multi-step forms with nested substeps. It offers a user-friendly way to guide users through complex form input processes, improving user experience and data collection efficiency. With this package, developers can easily implement intuitive form steppers within their React applications.

Install:

npm install react-form-stepper-substepper

Usage:

App.jsx

import React, { useState } from 'react';
import SSS from 'react-form-stepper-substepper';
import BasicForm from './BasicForm';

const mainStepperList = ['Basic Details', 'Documents', 'Bank Details']; // list of main stepper
const subStepperList = [3, 2, 2]; // number of sub-stepper you need respect to main stepper

const App = () => {
  const [inputs, setInputs] = useState('');

  return (
    <SSS
      // backPreviousMainStep={false}
      // IconComplete={<AiFillAccountBook />}
      mainStepperList={mainStepperList}
      subStepperList={subStepperList}
      NextButton={handleNext => {
        return <button onClick={handleNext}>Next</button>;
      }}
      BackButton={handleback => {
        return <button onClick={handleback}>Back</button>;
      }}
      // SaveAsDraftButton={<button onClick={() => {}}>Save As Draft</button>}
    >
      {/* If your subStepperList=[4, 2, 3], then you need to add total 9 forms in the children*/}
      {/* Form 1 */}
      <BasicForm
        inputValue={inputs}
        onInputChange={(text: string) => {
          window.alert(text);
          setInputs(text);
        }}
      />
      {/* Form 2*/}
      <BasicForm
        inputValue={inputs}
        onInputChange={(text: string) => {
          window.alert(text);
          setInputs(text);
        }}
      />
      {/* Form 3 */}
      <BasicForm
        inputValue={inputs}
        onInputChange={(text: string) => {
          window.alert(text);
          setInputs(text);
        }}
      />
      {/* Form 4 */}
      <BasicForm
        inputValue={inputs}
        onInputChange={(text: string) => {
          window.alert(text);
          setInputs(text);
        }}
      />
      {/* and so on..... */}
    </SSS>
  );
};

export default App;

BasicForm.jsx

import React from 'react';

const BasicForm = ({ inputValue, onInputChange }) => {

  const onChangeHandler = event => {
    onInputChange(event.target.value);
  };

  return (
    <div className="form">
      <label htmlFor="someinput">Some Input</label>
      <br />
      <input
        name="someinput"
        type="text"
        value={inputValue}
        placeholder="Type something..."
        onChange={e => onChangeHandler(e)}
      />
      <br />
      <br />
      <input
        name="someinput"
        type="text"
        value={inputValue}
        placeholder="Type something..."
        onChange={e => onChangeHandler(e)}
      />
    </div>
  );
};

export default BasicForm;

Props: