A custom React hook for managing and displaying progress bars in React applications. This hook is designed to simplify the process of tracking progress for asynchronous tasks, such as API calls.
You can install the react-progress-bar-hook
package via npm or yarn:
npm install react-progress-bar-hook
or
yarn add react-progress-bar-hook
To use the ProgressBar hook in your React application, simply import it and start using it in your components:
import React from "react";
import { useProgressBar, LOADING_STATE } from "react-progress-bar-hook";
const MyComponent = () => {
const {
incrementTotalSteps,
incrementCompletedSteps,
progressBarLoadingState,
ProgressBarComponent
} = useProgressBar();
// Example usage:
// Call incrementTotalSteps when initiating progress process
// Call incrementCompletedSteps when on step or more steps are completed
return (
<div style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
textAlign: 'center'
}}>
{/* Render the progress bar component with custom styles */}
<ProgressBarComponent
progressBarContainerStyle={{ width: "90vw", height: "5px" }}
progressBarElementStyle={{ backgroundColor: "blue" }}
/>
{/* Display the current loading state */}
<div style={{
margin: "10px",
fontFamily: "sans-serif",
fontWeight: "bold"
}}>
Loading State: {progressBarLoadingState}
</div>
</div>
);
};
This hook returns an object with the following properties:
-
incrementTotalSteps(inc: number)
: Function to increment the total number of steps. -
incrementCompletedSteps(n?: number)
: Function to increment the number of completed steps. -
resetProgressBar()
: Function to reset the progress bar to its initial state. -
progressBarLoadingState
: Current loading state of the progress bar (LOADING_STATE
enum). -
ProgressBarComponent
: Component to render the progress bar.
A component responsible for rendering the progress bar. It accepts the following props:
-
noProgressBarStyle
: Optional CSS styles for the container of the progress bar when it's not displayed. -
progressBarContainerStyle
: Optional CSS styles for the container of the progress bar. -
progressBarElementStyle
: Optional CSS styles for the progress bar element.
This component conditionally renders either the NoProgressBar
component or the ProgressBar
component based on the progress width and completion state.
An enum representing the loading states of the progress bar:
-
INITIAL
: Initial state. -
LOADING
: Loading state. -
COMPLETED
: Completed state.
For a more detailed example of how to use this hook, check out the example folder in this repository.
Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.