react-progressbar.js

This module is a React wrapper for progressbar.js. That's why most of the documentation refers to the original documentation.

Shortcuts

• How to install
• API documentation
• Demos These demos use the original progressbar.js but the options are exactly the same for react-progressbar.js too

Get started

react-progressbar.js is lightweight, MIT licensed and supports all major browsers including IE9+.

How to install

Install the library using npm:

npm install --save react-progressbar.js 

Since React users are anyways using a CommonJS module loader, this module is published only in NPM.

Loading module

CommonJS

var ProgressBar = require('react-progressbar.js') var Circle = ProgressBar.Circle;

How it works

See https://github.com/kimmobrunfeldt/progressbar.js#how-it-works.

API

NOTE: Line, Circle and SemiCircle all point to the same documentation which is named Shape. You almost certainly should replace it(Shape) with Line, Circle or SemiCircle.

Example: if documentation states <Shape />, replace it with <Circle />, simple. Shape is the internal base object for all progress bars.

ProgressBar

• Line
• Circle
• SemiCircle

Important: make sure that your container has same aspect ratio as the SVG canvas. For example: if you are using SemiCircle, set e.g.

#container {     width: 300px;     height: 150px; }

Shape

Line, Circle or SemiCircle shaped progress bar. Appends SVG to container.

Example

var App = React.createClass({     render: function render() {         var options = {             strokeWidth: 2         };          // For demo purposes so the container has some dimensions.         // Otherwise progress bar won't be shown         var containerStyle = {             width: '200px',             height: '200px'         };          return (             <Circle                 progress={this.state.progress}                 text={'test'}                 options={options}                 initialAnimate={true}                 containerStyle={containerStyle}                 containerClassName={'.progressbar'} />         );     } });

With Line shape, you can control the width of the line by specifying e.g. height: 5px with CSS.

Props:

Contributing

See documentation for contributors.