# react-multi-progress > ![alt text](docs/progressbar.png) Latest version **1.3.0** (published 2022-10-30) · ISC license · 0 weekly downloads ## Install ```sh npm install react-multi-progress pnpm add react-multi-progress yarn add react-multi-progress bun add react-multi-progress ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.0 | | Published | 2022-10-30 | | First published | 2021-01-20 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 54.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 10 | | Maintainers | nxt191 | ## Links - npm: https://www.npmjs.com/package/react-multi-progress - Repository: https://github.com/N3XT191/react-multi-progress - Homepage: https://github.com/N3XT191/react-multi-progress#readme - Issues: https://github.com/N3XT191/react-multi-progress/issues - npm.io page: https://npm.io/package/react-multi-progress ## Dependencies (1) - [glamor](https://npm.io/package/glamor.md) ^2.20.40 ## Recent versions - 1.3.0 (latest) — 2022-10-30 - 1.2.0 — 2022-10-20 - 1.1.6 — 2022-10-20 - 1.1.5 — 2022-06-10 - 1.1.4 — 2022-02-15 - 1.1.3 — 2022-02-15 - 1.1.2 — 2022-02-15 - 1.1.1 — 2022-02-15 - 1.1.0 — 2022-02-15 - 1.0.5 — 2021-01-20 - 1.0.4 — 2021-01-20 - 1.0.3 — 2021-01-20 - 1.0.2 — 2021-01-20 - 1.0.1 — 2021-01-20 - 1.0.0 — 2021-01-20 ## README # react-multi-progress ![alt text](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` | yes | `Record` | 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 ```jsx import MultiProgress from "react-multi-progress"; function Progress() { return ( ); } ``` ### 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) { return (
{children}
); } function Progress() { return ( 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} /> ); } ``` --- _Source: https://npm.io/package/react-multi-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._