bloyal-component-library v0.0.58
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
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago