react-aqfa-bar

Beta Version

Demo

Demo Link

Getting Started

Install this library with your favorite package manager:

npm i react-aqfa-bar

or

yarn add react-aqfa-bar

Then, import and use it:

example 1

import { ProgressBar } from "react-aqfa-bar";

 <ProgressBar
          value={50}
          totalValue={100}
          ContainerStyle={{ width: "500px" }}
        />

example 2

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"
      />

Docs

we are working on it.

Props

| 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 |

Progress bar threshold

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%)`
}}

example 3

You can customize it according to your needs.

import { ProgressBar } from "react-aqfa-bar";

     <ProgressBar leftCapText="Soft Cap" rightCapText="Hard Cap" />

Props

| 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 :smile:

Copyright © 2024 — aqfa.tech