@shubham-gapat/react-step-progressbar v1.0.4

Installation

To install and set up the library, run:

$ npm i @shubham-gapat/react-step-progressbar

Or if you prefer using Yarn:

$ yarn add @shubham-gapat/react-step-progressbar

Usage

Importing @shubham-gapat/react-step-progressbar

Import the @shubham-gapat/react-step-progressbar component into your React application:

import ProgressBar from "@shubham-gapat/react-step-progressbar";

Example with @shubham-gapat/react-step-progressbar

import React, { useState, useEffect } from "react";
import { Route, withRouter } from "react-router";
import { connect } from "react-redux";
import ProgressBar from "@shubham-gapat/react-step-progressbar";
import { bindActionCreators } from "redux";

import "./patient.css";
import StepOneDetails from "./StepOneDetails";
import StepTwoDetails from "./StepTwoDetails";
import StepThreeDetails from "./StepThreeDetails";
import StepFourDetails from "./StepFourDetails";

import { StepFour, StepThree, StepTwo, StepOne } from "../../constant";
import * as createActions from "../../modules/actions/apiActions";
import * as patientActions from "../../modules/actions/patientActions";

const stepperComponent = props => {
  const { path } = props.match;

  const onStepFourClick = () => {
    props.setStep(3);
    props.history.push(`${path}/step-4`);
  };

  const onStepThreeClick = () => {
    props.setStep(2);
    props.history.push(`${path}/step-3`);
  };

  const onStepTwoClick = () => {
    props.setStep(1);
    props.history.push(`${path}/step-2`);
  };

  const onStepOneClick = () => {
    props.setStep(0);
    props.history.push(path);
  };

  const progressBarMenu = [
    {
      stepName: "Step One",
      image: StepOne,
      onClick: onStepOneClick,
      completeStep: props.api.stepOneDataLoad,
    },
    {
      stepName: "Step Two",
      image: StepTwo,
      onClick: onStepTwoClick,
      completeStep: props.api.stepTwoDataLoad,
    },
    {
      stepName: "Step Three",
      image: StepThreee,
      onClick: onStepThreeClick,
      completeStep: props.api.StepThreeDataLoad,
    },
    {
      stepName: "StepFour",
      image: StepFour,
      onClick: onStepFourClick,
      completeStep: props.api.StepFourDataLoad,
    },
  ];

  return (
    <div>
      <div className="add-patients-header">
        <ProgressBar
          progressBarMenu={progressBarMenu}
          currentActive={props.api.currentActive}
        />
      </div>
      <div className="add-patient-children">
        <Route exact path={`${path}`} component={StepOneDetails} />
        <Route exact path={`${path}/step-2`} component={StepTwoDetails} />
        <Route exact path={`${path}/step-3`} component={StepThreeDetails} />
        <Route exact path={`${path}/step-4`} component={StepFourDetails} />
      </div>
    </div>
  );
};

const mapStoreToProps = state => ({
  api: state.api,
});

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      setStep: createActions.updateStep,
    },
    dispatch
  );
};

export default withRouter(
  connect(mapStoreToProps, mapDispatchToProps)(AddNewPatient)
);

In the above example,we xan see how to use the @shubham-gapat/react-step-progressbar.

The above example is with function-based component , you can also use class-based component.

In these step-progress-bar it is necessary to add onClick and completeStep in progressBarMenu list, stepName and image are the optional fields.

Authors

Shubham Gapat - GitHub

License

None