rc-progress-bars

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