react-multi-progress

KO | EN

gitlite — search

#javascript #python #llm #golang #android #rust #linux #awesome #cli #kubernetes #pytorch #mcp #openai #open-source

react-multi-progress

(★ 10)

A simple, typed react progress bar that allowes multiple layers in different colors.

react-multi-progress Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-multi-progress

![alt text](https://raw.githubusercontent.com/N3XT191/react-multi-progress/main/docs/progressbar.png)

A simple, typed react progress bar that allowes multiple layers in different
colors. [Demo](http://progress.bitter.li)

## 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

## Example

### Basic

```jsx
import MultiProgress from "react-multi-progress";

function Progress() {
	return (
		<MultiProgress
			elements={[
				{
					value: 35,
					color: "blue",
				},
			]}
		/>
	);
}
```

### Advanced

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

react-multi-progress

react-multi-progress Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-multi-progress

react-multi-progress Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README