React Shape Progress Bars
react-shape-progressbars
is a flexible and extensible React component library that allows you to visualize progress using various shape-based progress bars.
Table of Contents
Installation
Install react-shape-progressbars
using npm:
npm install @demigod916/react-shape-progressbars
Or using yarn:
yarn add @demigod916/react-shape-progressbars
Usage
To use a shape-based progress bar in your React application:
import React from "react";
import { ProgressBar } from "@demigod916/react-shape-progressbars";
const App = () => {
return (
<ProgressBar shape="circle" value={50} />
);
};
export default App;
Props
Prop | Description | Type | Default Value |
---|---|---|---|
value |
The current progress value (0-100). | number |
0 |
trackColor |
Color of the progress bar's track. | string |
"lightgray" |
progressColor |
Color of the progress bar's fill. | string |
"dodgerblue" |
strokeWidth |
Width of the progress bar's stroke. | number |
3 |
transitionSpeed |
Speed of the progress bar's transition (in seconds). | number |
0.3 |
shape |
Shape of the progress bar (e.g., "circle", "square"). | string |
"star" |
customSvg |
Custom SVG component. Used only if shape is set to "custom". | ReactElement |
- |
children |
Any child components or elements to render inside the progress bar. | ReactNode (optional) |
- |
Supported Shapes
Currently, the library supports the following shapes:
- Star
- Heart
- Triangle
- Circle
- Square
- Pentagon
- Pill
- Diamond
Custom Shape
If you'd like to use a custom shape not provided by the library, set the shape
prop to "custom" and provide your SVG component to the customSvg
prop.
<ProgressBar
shape="custom"
value={50}
customSvg={
<svg>
<path/>
</svg>
} />
Example
<ProgressBar
shape="custom"
customSvg={
<svg viewBox="0 0 115 115">
<path d="M 8.5219935,8.660347 105.46218,8.5219909 106.47801,106.47801 10.553674,105.37116 9.8280725,12.119245 H 97.770808 l 1.01584,87.579322 -84.024494,-1.106847 -0.87072,-82.875219 h 78.364818 l 0.87072,79.554676 -74.736817,-1.38356 -0.14512,-74.573862 68.061295,0.138357 1.160961,69.731403 -65.739375,-1.38356 V 21.942519 l 58.048012,0.415068 1.596321,61.845114 -54.420011,-1.660273 -0.435361,-56.864299 47.744491,0.276712 1.451201,52.713621 -43.245771,-1.798628 -0.29024,-46.625958 34.393448,0.69178 1.741441,39.569804 -30.475207,-2.07534 -0.58048,-33.620497 23.509446,1.521915 1.160959,28.639684 -20.461925,-2.07534 0.14512,-22.413665 16.108324,0.415068 0.29024,18.124631 -12.915682,-1.660273 -0.435361,-9.823272 h 8.852322 l -0.290241,8.301358 -4.06336,-0.553424 -0.14512,-4.565747" />
</svg>
}
value={value}
strokeWidth={2}
transitionSpeed={1}
></ProgressBar>
Contributing
Contributions to react-shape-progressbars
are welcome! Whether it's bug reports, feature requests, or code contributions, we'd love to hear from you. Please submit an issue or pull request on GitHub.
License
react-shape-progressbars
is MIT licensed.