A simple and customizable progress bar component for React. This package provides both a <ProgressBar />
component and a custom hook useProgressBar
to manage progress state.
To install the package, use npm or yarn:
npm install react-progressive-bar
or
yarn add react-progressive-bar
A customizable progress bar component that can display both determinate and indeterminate states.
-
progress
(number
): The progress percentage (0-100) for the progress bar. Defaults to0
. -
height
(number
): Height of the progress bar in pixels. Defaults to20
. -
color
(string
): Color of the progress bar. Defaults to'blue'
. -
indeterminate
(boolean
): Iftrue
, the progress bar shows an indeterminate loading animation. Defaults tofalse
. -
animationDuration
(string
): Duration of the progress bar animation. Defaults to'0.5s'
. -
animationTimingFunction
(boolean
): Iftrue
, displays the progress percentage inside the progress bar. Defaults tofalse
. -
showPercentage
(string
): Duration of the progress bar animation. Defaults to'0.5s'
. -
percentageColor
(string
): Color of the percentage text inside the progress bar. Defaults toblack
.
A custom hook to manage the progress state of the progress bar.
-
initialValue
(number
): The initial value of the progress. Defaults to0
. -
step
(number
): The amount by which the progress increases in each interval. Defaults to10
. -
interval
(number
): The time interval (in milliseconds) at which the progress is updated. Defaults to1000
.
-
progress
(number
): The current progress value. -
setProgress
(Function
): A function to manually set the progress value.
import React from 'react';
import { ProgressBar, useProgressBar } from 'react-progressive-bar';
const MyComponent = () => {
const { progress, setProgress } = useProgressBar(0, 10, 1000);
return (
<div className="flex flex-col gap-4 p-4">
<h1>Testing Progress Bar</h1>
<ProgressBar
progress={progress}
color="#4CAF50"
height={24}
showPercentage={true}
indeterminate={false}
percentageColor="black"
/>
<button onClick={() => setProgress(0)}>Reset Progress</button>
</div>
);
};
export default MyComponent;
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Feel free to open issues and pull requests to contribute to this project. Please ensure that your code follows the existing style and includes relevant tests.
- Initial release with
ProgressBar
component anduseProgressBar
hook.
- Bug fixes in Initial release with
ProgressBar
component anduseProgressBar
hook.
- Percentage and custom features added for
ProgressBar
and updateduseProgressBar
default values.