1.0.6 • Published 1 year ago

@7hours/react-progress-bar v1.0.6

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

A React Progress Bar Component

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

Screenshot 2024-02-18 222140

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

PropTypeDefaultDescription
stepsarraystringRequiredAn array of strings representing the steps in the progress bar.
currentStepnumberRequiredThe index of the current step (zero-based).
heightnumber6The height of the progress bar.
completedColorstring"green"The color of the completed portion of the progress bar.
incompleteColorstring"gray"The color of the incomplete portion of the progress bar.
iconelementStarThe icon to be displayed within each step.
stepContainerSizenumber24The size of the step container.
stepContainerActiveColorstring"green"The color of the active step container.
stepContainerInactiveColorstring"gray"The color of the inactive step container.
stepCompleteTextColorstring"green"The text color of completed steps.
stepInCompleteTextColorstring"gray"The text color of incomplete steps.
stepFontobjectAn 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

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago