1.0.45 • Published 1 year ago

react-aqfa-bar v1.0.45

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

react-aqfa-bar

Beta Version

Contributors Forks Stargazers Issues MIT License

Demo

Demo Link

Edit charming-bogdan-8zfk8j

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

PropsDescriptionDefaultType
valueThe initial value of the progress bar.10number
totalValueThe total value of the progress bar.100number
initialTextThe text to display for the initial value.--string
totalTextThe text to display for the total value.--string
hideInitialWhether to hide the initial value.trueboolen
hideTotalWhether to hide the total value.trueboolen
initialSymbolThe symbol to append to the initial value (e.g. rs,$ etc.).--string
finalSymbolThe symbol to append to the total value. (e.g. rs,$ etc.).--string
containerStyleAdditional styles for the container.--object
barStyleAdditional styles for the progress bar.--object
barBgStyleAdditional styles for the progress bar background.--object
textStyleAdditional styles for the initial and final text element of progress bar.--object
valueStyleAdditional 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

PropsDescriptionDefaultType
leftCapTextrightCapText shows the first threshold with text.--string
rightCapTextrightCapText shows the final threshold with text.--string
leftCapleftCap shows the first threshold (range from 0 - 100).20number
rightCaprightCap shows the final threshold (range from 0 - 100).80number
  • All done :smile:
Copyright © 2024 — aqfa.tech
1.0.44

1 year ago

1.0.45

1 year ago

1.0.43

1 year ago

1.0.39

1 year ago

1.0.38

1 year ago

1.0.40

1 year ago

1.0.42

1 year ago

1.0.41

1 year ago

1.0.33

1 year ago

1.0.32

1 year ago

1.0.31

1 year ago

1.0.37

1 year ago

1.0.36

1 year ago

1.0.35

1 year ago

1.0.34

1 year ago

1.0.30

1 year ago

1.0.29

1 year ago

1.0.28

1 year ago

1.0.27

1 year ago

1.0.26

1 year ago

1.0.25

1 year ago

1.0.24

1 year ago

1.0.23

1 year ago

1.0.22

1 year ago

1.0.21

1 year ago

1.0.20

1 year ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.16

1 year ago

1.0.15

1 year ago

1.0.14

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago