Beta Version
Introducing react-aqfa-bar, a powerful library that simplifies the creation of progress bars and various chart bars in React applications. With easy-to-use components, it provides a seamless way to visualize data and progress in a visually appealing manner.
Install this library with your favorite package manager:
npm i react-aqfa-baror
yarn add react-aqfa-bar
Then, import and use it:
import { ProgressBar } from "react-aqfa-bar";
<ProgressBar
value={50}
totalValue={100}
ContainerStyle={{ width: "500px" }}
/>You can customize it according to your needs.
import { ProgressBar } from "react-aqfa-bar";
<ProgressBar
value={66}
totalValue={100}
containerStyle={{ width: "500px" }}
initialText="Initial"
totalText="Total"
/>we are working on it.
| Props | Description | Default | Type |
|---|---|---|---|
| value | The initial value of the progress bar. | 10 | number |
| totalValue | The total value of the progress bar. | 100 | number |
| initialText | The text to display for the initial value. | -- | string |
| totalText | The text to display for the total value. | -- | string |
| hideInitial | Whether to hide the initial value. | true | boolen |
| hideTotal | Whether to hide the total value. | true | boolen |
| initialSymbol | The symbol to append to the initial value (e.g. rs,$ etc.). | -- | string |
| finalSymbol | The symbol to append to the total value. (e.g. rs,$ etc.). | -- | string |
| containerStyle | Additional styles for the container. | -- | object |
| barStyle | Additional styles for the progress bar. | -- | object |
| barBgStyle | Additional styles for the progress bar background. | -- | object |
| textStyle | Additional styles for the initial and final text element of progress bar. | -- | object |
| valueStyle | Additional styles for the initial and final value element of progress bar. | -- | object |
if you want different color of background behind the progress bar then apply the given below prop.
BarBgStyle = {{
background:`linear-gradient(to right, #fff 0%, #fff 80%, rgba(69, 76, 84, 0.30) 80%, rgba(69, 76, 84, 0.30) 100%)`
}}
You can customize it according to your needs.
import { ProgressBar } from "react-aqfa-bar";
<ProgressBar leftCapText="Soft Cap" rightCapText="Hard Cap" />
| Props | Description | Default | Type |
|---|---|---|---|
| leftCapText | rightCapText shows the first threshold with text. | -- | string |
| rightCapText | rightCapText shows the final threshold with text. | -- | string |
| leftCap | leftCap shows the first threshold (range from 0 - 100). | 20 | number |
| rightCap | rightCap shows the final threshold (range from 0 - 100). | 80 | number |
- All done 😄
Copyright © 2024 — aqfa.tech