A React Progress Bar Component

A customizable progress bar React component to visualize progress through a series of steps.

Installation

You can install the @7hours/react-progress-bar package via npm:

npm install @7hours/react-progress-bar

Or using yarn:

yarn add @7hours/react-progress-bar

Usage

import React from "react";
import ProgressBar from "@7hours/react-progress-bar"

const steps = ["Order Placed", "Processing", "Shipped", "Delivered"];
const currentStep = 1;
const height = 10;
const completedColor = "green";
const incompleteColor = "gray";
const stepCompleteTextColor = "green";
const stepInCompleteTextColor = "gray";
const stepContainerSize = 24;
const stepFont = {
  fontFamily: "JetBrains Mono",
  fontSize: "16px",
  fontWeight: "bold",
};

const App = () => {
  return (
    <ProgressBar
      steps={steps}
      currentStep={currentStep}
      height={height}
      completedColor={completedColor}
      incompleteColor={incompleteColor}
      stepCompleteTextColor={stepCompleteTextColor}
      stepInCompleteTextColor={stepInCompleteTextColor}
      stepContainerSize={stepContainerSize}
      stepFont={stepFont}
    />
  );
};

export default App;

Props

| Prop | Type | Default | Description | |------------------------------|---------------|---------------|-----------------------------------------------------------------------------------------------------------------| | steps | array[string] | Required | An array of strings representing the steps in the progress bar. | | currentStep | number | Required | The index of the current step (zero-based). | | height | number | 6 | The height of the progress bar. | | completedColor | string | "green" | The color of the completed portion of the progress bar. | | incompleteColor | string | "gray" | The color of the incomplete portion of the progress bar. | | icon | element | Star | The icon to be displayed within each step. | | stepContainerSize | number | 24 | The size of the step container. | | stepContainerActiveColor | string | "green" | The color of the active step container. | | stepContainerInactiveColor | string | "gray" | The color of the inactive step container. | | stepCompleteTextColor | string | "green" | The text color of completed steps. | | stepInCompleteTextColor | string | "gray" | The text color of incomplete steps. | | stepFont | object | | An object specifying the font properties for the step text. |

Contributing

Contributions, feature requests, and bug reports are welcome! If you encounter any issues, have suggestions for new features, or find bugs, please don't hesitate to open an issue on GitHub.

If you'd like to contribute to the project, feel free to fork the repository and submit a pull request with your changes.

Your feedback and contributions are valuable and greatly appreciated!

Credits

• Author: 7hours