# rc-progress-bars

> Simple progress bar components for react

Latest version **0.3.12** (published 2022-10-13) · 0 weekly downloads

## Install

```sh
npm install rc-progress-bars
pnpm add rc-progress-bars
yarn add rc-progress-bars
bun add rc-progress-bars
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.12 |
| Published | 2022-10-13 |
| First published | 2021-07-14 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 34.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ryan Christensen |
| Maintainers | rchristensen174 |

## Links

- npm: https://www.npmjs.com/package/rc-progress-bars
- npm.io page: https://npm.io/package/rc-progress-bars

## Dependencies (2)

- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [react-icons](https://npm.io/package/react-icons.md) ^4.2.0

## Recent versions

- 0.3.12 (latest) — 2022-10-13
- 0.3.11 — 2022-10-11
- 0.3.10 — 2022-10-11
- 0.3.9 — 2022-10-11
- 0.3.8 — 2022-10-11
- 0.3.7 — 2021-09-29
- 0.3.6 — 2021-09-28
- 0.3.5 — 2021-09-28
- 0.3.4 — 2021-08-27
- 0.3.3 — 2021-08-26
- 0.3.2 — 2021-08-24
- 0.3.1 — 2021-08-24
- 0.3.0 — 2021-08-24
- 0.2.9 — 2021-08-23
- 0.2.8 — 2021-08-05
- … 16 more at https://npm.io/package/rc-progress-bars/versions

## README

# Getting Started

Install the package using either npm or yarn

```
//npm
 
npm install --save rc-progress-bars
```

```
//yarn
 
yarn add rc-progress-bars
```

## Available Components

### Progress bar with checkpoints

This component shows a progress bar with some number of checkpoints, the checkpoints will be displayed as stars. Example below for this component:

```
import ProgressBarWithCheckpoints from "./ProgressBarWithCheckpoints";

export default function SampleProgressBarWithCheckpoint() {
    return (
        <ProgressBarWithCheckpoints progress={2100} checkpoints={[{Position: 1000, Label: 'First'}, {Position: 2000, Label: 'Second'}, {Position: 3000, Label: 'Third'}]} maximumValue={3200} filledBackground={'#912420'} text='Loyalty Points'/>
    )
}
```
#### Props
##### Required
`progress: number` The value the bar should be filled up to.

`maxValue: number` The value for the bar to be completely full.

`checkpoints: Array<Checkpoint>` Array of the checkpoints to be used. Each checkpoint will be of type `{Position: number, Label: string, Description?: string}`.

##### Optional
`filledBackground: string` The color of the filled portion of the bar. Defaults to `#e0e0e0`

`unfilledBackground: string` The color of the unfilled portion of the bar. Defaults to `#0074d9`

`filledCheckpoint: string` The color of all filled checkpoint icons. Defaults to `#FFD700`

`unfilledCheckpoint: string` The color of all unfilled checkpoint icons. Defaults to `#848484`

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