custom-react-step-progress-bar

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

##### 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 (


        step 1

                  onClick={() => {
            setStepOne(true);
            onStepTwoClick();
          }}
        >
          done


    );
  };
  const StepTwoDetails = () => {
    return (
      

        step 2

                  onClick={() => {
            setStepTwo(true);
            onStepThreeClick();
          }}
        >
          done
        
      

    );
  };
  const StepThreeDetails = () => {
    return (
      

        step 3

                  onClick={() => {
            setStepThree(true);
          }}
        >
          done
        
      

    );
  };
  return (
    

      
                  progressBarMenu={progressBarMenu}
          currentActive={step}
          color={"red"}
        />
      

      
        
        
                  exact
          path={getRegPath("/step-3")}
          component={StepThreeDetails}
        />
      

    

  );
};

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

License

None