# color-coded-progress-bar

> Color coded Progress Bar for React.

Latest version **1.1.0** (published 2022-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install color-coded-progress-bar
pnpm add color-coded-progress-bar
yarn add color-coded-progress-bar
bun add color-coded-progress-bar
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-06-03 |
| First published | 2022-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Rocio Ferreiro Rico |
| Maintainers | rocioferreiro |
| Keywords | react, progress bar, color bar, section marker |

## Links

- npm: https://www.npmjs.com/package/color-coded-progress-bar
- Repository: https://github.com/rocioferreiro/window-progress-bar
- Homepage: https://github.com/rocioferreiro/window-progress-bar#readme
- Issues: https://github.com/rocioferreiro/window-progress-bar/issues
- npm.io page: https://npm.io/package/color-coded-progress-bar

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-06-03
- 1.0.3 — 2022-05-26
- 1.0.2 — 2022-05-26
- 1.0.1 — 2022-05-26
- 1.0.0 — 2022-05-26

## README

# Window Progress Bar
Color coded Progress Bar for React.

![image of bar](https://i.imgur.com/iipIjpq.png)

## Table of contents

- [Installation](#install)
- [Usage](#usage)
- [Options](#options)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [License](#license)

## Install

`npm install color-coded-progress-bar`

## Usage

`import { WindowProgressBar } from 'color-coded-progress-bar';`

`<WindowProgressBar 
        tooltip 
        value={7} />`

## Options

| Attribute | Type                       | Purpose                                                            | Default                                                           |
|-----------|----------------------------|--------------------------------------------------------------------|-------------------------------------------------------------------|
| value     | Number                     | Defines where the marker will be located.                          | No default, is mandatory.                                         |
| tooltip   | Boolean                    | Indicates whether the bar will show the value on hover or not.     | False                                                             |
| label     | Boolean                    | Indicates whether the bar will show the min and max values or not. | False                                                             |
| max       | Number                     | Defines the maximum value of the bar                               | 10                                                                |
| colors    | String[]                   | Defines the colors for each section.                               | ['#f1a636', '#f1d836','#c8f136', '#f1d836']                       |
| sectors   | {min:number, max:number}[] | Defines the sections.                                              | [{min:0, max:2}, {min:2, max:5}, {min:5, max:8}, {min:8, max:10}] |
| height    | Number                     | Defines the height of the bar                                      | 20                                                                |

## Contributing

Please read through our [contributing guidelines](https://github.com/rocioferreiro/window-progress-bar/blob/main/Contributing.md). Included are directions for opening issues, coding standards, and notes on development.

## Versioning

Maintained under the [Semantic Versioning guidelines](https://semver.org/).

## License

[MIT](https://opensource.org/licenses/MIT) © Rocio Ferreiro

---
_Source: https://npm.io/package/color-coded-progress-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._