ProgressBar React Component

This is a flexible and customizable progress bar component for React.

Installation

You can install the @a-triki/progress-bar-react package via npm:

npm i @a-triki/progress-bar-react

Usage

Here's an example of how to use the ProgressBar component in your React application:

import React from "react";
import ProgressBar from "@a-triki/progress-bar-react";

const App = () => {
	return (
		<ProgressBar
			value={50}
			max={100}
			ariaLabel="Progression de l'opération en cours"
			progressStyle={{ backgroundColor: "#ff0000" }}
			barStyle={{ backgroundColor: "#00ff00" }}
		/>
	);
};

export default App;

Props

Here are the props available for the ProgressBar component:

Default Props

| Prop Name | Type | Description | | --------- | ------ | ----------------------------------------------------------------- | | value | number | The current value of the progress bar. | | max | number | The maximum value of the progress bar. | | ... | ... | Other standard HTML progress element attributes can also be used. |

Custom Props

| Prop Name | Type | Description | | ------------- | ------------- | -------------------------------------------------- | | progressStyle | CSSProperties | Style for the progress bar element. | | barStyle | CSSProperties | Style for the bar element inside the progress bar. |

Conclusion

The ProgressBar component provides a flexible and customizable way to display progress bars in your React applications. With the ability to customize both the default and custom props, you have full control over the appearance and behavior of the progress bar.

Feel free to use and customize the ProgressBar component to suit your specific needs and enhance the user experience in your applications.

Thank you for using the ProgressBar component! If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on GitHub. Your feedback is highly appreciated and will contribute to making this component even better for the community.