custom-react-step-progress-bar/README.md

A simple react step progress bar component for multi-step forms.

## Installation

To install and set up the library, run:

```sh
$ npm i custom-react-step-progress-bar
```

Or if you prefer using Yarn:

```sh
$ yarn add custom-react-step-progress-bar
```

## Usage

##### Importing custom-react-step-progress-bar

Import the custom-react-step-progress-bar component into your React application:

```tsx
import ProgressBar from "custom-react-step-progress-bar";
```

**Live Demo** - [CodeSandBox](https://codesandbox.io/s/great-ritchie-n6c6f)

##### Example with custom-react-step-progress-bar

```jsx
import React, { useState } from "react";
import { Route } from "react-router";
import ProgressBar from "custom-react-step-progress-bar";

const stepperComponent = props => {
  const [step, setStep] = useState(0);
  const [stepOne, setStepOne] = useState(false);
  const [stepTwo, setStepTwo] = useState(false);
  const [stepThree, setStepThree] = useState(false);

  const preFixPath = prefix => path => `${prefix}${path}`;

  const LANDING = "";

  const getRegPath = preFixPath(LANDING);

  const onStepThreeClick = () => {
    setStep(2);
    props.history.push(getRegPath("/step-3"));
  };

  const onStepTwoClick = () => {
    setStep(1);
    props.history.push(getRegPath("/step-2"));
  };

  const onStepOneClick = () => {
    setStep(0);
    props.history.push(getRegPath("/"));
  };

  const progressBarMenu = [
    {
      stepName: "Step One",
      onClick: onStepOneClick,
      completeStep: stepOne,
    },
    {
      stepName: "Step Two",
      onClick: onStepTwoClick,
      completeStep: stepTwo,
    },
    {
      stepName: "Step Three",
      onClick: onStepThreeClick,
      completeStep: stepThree,
    },
  ];
  const StepOneDetails = () => {
    return (
      <div>
        <p>step 1</p>
        <button
          onClick={() => {
            setStepOne(true);
            onStepTwoClick();
          }}
        >
          done
        </button>
      </div>
    );
  };

  const StepTwoDetails = () => {
    return (
      <div>
        <p>step 2</p>
        <button
          onClick={() => {
            setStepTwo(true);
            onStepThreeClick();
          }}
        >
          done
        </button>
      </div>
    );
  };

  const StepThreeDetails = () => {
    return (
      <div>
        <p>step 3</p>
        <button
          onClick={() => {
            setStepThree(true);
          }}
        >
          done
        </button>
      </div>
    );
  };

  return (
    <div>
      <div className="add-patients-header">
        <ProgressBar
          progressBarMenu={progressBarMenu}
          currentActive={step}
          color={"red"}
        />
      </div>
      <div className="add-patient-children">
        <Route exact path={getRegPath("/")} component={StepOneDetails} />
        <Route exact path={getRegPath("/step-2")} component={StepTwoDetails} />
        <Route
          exact
          path={getRegPath("/step-3")}
          component={StepThreeDetails}
        />
      </div>
    </div>
  );
};

export default stepperComponent;
```

In the above example,we xan see how to use the `custom-react-step-progress-bar`.

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.

You can change step-progress-bar color also using `color` props, it is an optional field

## Authors

**Shubham Gapat** - [GitHub](https://github.com/shubham-gapat)

## License

None