0.0.62 • Published 1 year ago

bloyal-component-library v0.0.62

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

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

0.0.62

1 year ago

0.0.60

1 year ago

0.0.61

1 year ago

0.0.59

1 year ago

0.0.58

1 year ago

0.0.57

1 year ago

0.0.51

1 year ago

0.0.52

1 year ago

0.0.53

1 year ago

0.0.54

1 year ago

0.0.55

1 year ago

0.0.56

1 year ago

0.0.50

1 year ago

0.0.47

1 year ago

0.0.48

1 year ago

0.0.49

1 year ago

0.0.44

1 year ago

0.0.45

1 year ago

0.0.46

1 year ago

0.0.43

1 year ago

0.0.40

2 years ago

0.0.41

2 years ago

0.0.42

2 years ago

0.0.37

2 years ago

0.0.38

2 years ago

0.0.39

2 years ago

0.0.36

2 years ago

0.0.34

2 years ago

0.0.35

2 years ago

0.0.30

2 years ago

0.0.31

2 years ago

0.0.32

2 years ago

0.0.33

2 years ago

0.0.27

2 years ago

0.0.28

2 years ago

0.0.29

2 years ago

0.0.26

2 years ago

0.0.25

2 years ago

0.0.24

2 years ago

0.0.23

2 years ago

0.0.22

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago