react-multi-progress
v1.3.0
Published

Downloads
7,508
Readme
react-multi-progress
A simple, typed react progress bar that allowes multiple layers in different colors. Demo
Installation
Install with npm:
npm install react-multi-progress --save
You can now import react-multi-progress
as a normal package installed from npm
like so:
import MultiProgress from 'react-multi-progress'
...
You can also import the type definitions if you're using TypeScript like so:
import MultiProgress, { IMultiProgressProps } from 'react-multi-progress'
...
Available props
| Attribute | Type | Optional | Default | Description |
| :------------------------- | :-------------------: | :------: | :---------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| backgroundColor | string
| yes | #ffffff
| Background color of the progress bar |
| border | string
| yes | none
| set a border around the progress bar, e.g. 1px solid red
|
| elements | ProgressElement[]
| no | none
| Set the color and size of each element, see "ProgressElement" below. |
| height | number
| yes | 10
| Height of the progress bar in px
|
| round | bool
| yes | true
| Wheter the ends of the progress bar container should be rounded |
| roundLastElement | bool
| yes | true
| Wheter the last progress element should be rounded on the right end |
| transitionTime | number
| yes | 0.6
| Transition time in seconds to animate when the value changes. Set to 0
for no animation. |
| className | string
| yes | | CSS className passed onto the ProgressBar Container |
| component | ElementType
| yes | div
| Custom element used to render progress elements, either a HTML tag name or React component accepting className
, children
, and element
props, with element
being the ProgressElement
passed in. Be sure to spread the remaining props (see example) as style information is provided in this way (a data attribute) |
| type generic (see example) | Record<string, any>
| yes | Record<string, never>
| Additional props to add to the definition of elements
, for use with custom components |
ProgressElement
| Attribute | Type | Optional | Description |
| :------------- | :------: | :------: | :------------------------------------------------------- |
| value | number
| no | Length of the element in % (0-100) |
| color | string
| no | Color of the element (any css compatible format) |
| showPercentage | bool
| yes | Show the percentage as text in the ProgressElement |
| textColor | string
| yes | Color of the percentage text (any css compatible format) |
| fontSize | number
| yes | font size of the percentage text (in px) |
| className | string
| yes | CSS className passed onto the ProgressElement |
Example
Basic
import MultiProgress from "react-multi-progress";
function Progress() {
return (
<MultiProgress
elements={[
{
value: 35,
color: "blue",
},
]}
/>
);
}
Advanced
import MultiProgress, { ProgressComponentProps } from "react-multi-progress";
// for non-TS projects, remove this and other types
type ExtraData = { isBold: boolean };
function CustomComponent({
children,
element,
...rest
}: ProgressComponentProps<ExtraData>) {
return (
<div
{...rest} // adds all styles for rendering the progress bar
style={{
fontWeight: element.isBold ? 900 : 300,
}}
>
{children}
</div>
);
}
function Progress() {
return (
<MultiProgress<ExtraData>
transitionTime={1.2}
elements={[
{
value: 15,
color: "blue",
isBold: false,
},
{
value: 35,
color: "rgb(100,0,0)",
showPercentage: true,
fontSize: 12,
textColor: "white",
isBold: true,
},
{
value: 25,
color: "black",
showPercentage: true,
textColor: "white",
fontSize: 12,
isBold: false,
className: "my-custom-css-class",
},
]}
height={15}
backgroundColor="gray"
border="1px solid red"
className="my-custom-css-class"
component={CustomComponent}
/>
);
}