react-aqfa-bar

Beta Version

React Aqfa Progress Chart Bar

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.

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 😄

Copyright © 2024 — aqfa.tech