react-multi-progress v1.3.0

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

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}
		/>
	);
}