react-circular-progressbar

What is react-circular-progressbar?

The react-circular-progressbar package is a React component library for creating customizable circular progress bars. It allows developers to easily display progress in a circular format with various customization options such as colors, text, and styles.

What are react-circular-progressbar's main functionalities?

Basic Circular Progress Bar

This feature allows you to create a basic circular progress bar. The `value` prop specifies the progress percentage.

import React from 'react';
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyComponent = () => (
  <div style={{ width: 200, height: 200 }}>
    <CircularProgressbar value={66} />
  </div>
);

export default MyComponent;

Customizable Styles

This feature allows you to customize the styles of the circular progress bar, including text color, path color, and trail color.

import React from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyComponent = () => (
  <div style={{ width: 200, height: 200 }}>
    <CircularProgressbar 
      value={66} 
      styles={buildStyles({
        textColor: 'red',
        pathColor: 'turquoise',
        trailColor: 'gold'
      })}
    />
  </div>
);

export default MyComponent;

Adding Text Inside the Progress Bar

This feature allows you to add text inside the circular progress bar. The `text` prop can be used to display any text, such as the progress percentage.

import React from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyComponent = () => (
  <div style={{ width: 200, height: 200 }}>
    <CircularProgressbar 
      value={66} 
      text={`${66}%`} 
      styles={buildStyles({
        textColor: 'black',
        pathColor: 'blue',
        trailColor: 'gray'
      })}
    />
  </div>
);

export default MyComponent;

Animation

This feature allows you to add animation to the circular progress bar. The `pathTransitionDuration` prop controls the duration of the animation.

import React from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyComponent = () => (
  <div style={{ width: 200, height: 200 }}>
    <CircularProgressbar 
      value={66} 
      styles={buildStyles({
        pathTransitionDuration: 0.5
      })}
    />
  </div>
);

export default MyComponent;

Other packages similar to react-circular-progressbar

react-progressbar.js

react-progressbar.js is a React wrapper for ProgressBar.js, a library for creating animated progress bars. It supports both linear and circular progress bars and offers a variety of customization options. Compared to react-circular-progressbar, it provides more advanced animation capabilities and supports multiple types of progress bars.

react-sweet-progress

react-sweet-progress is a React component for creating beautiful progress bars with customizable styles and animations. It supports both linear and circular progress bars. Compared to react-circular-progressbar, it offers more visually appealing default styles and additional customization options.

react-step-progress-bar

react-step-progress-bar is a React component for creating step-based progress bars. It supports both linear and circular progress bars and allows for detailed customization of each step. Compared to react-circular-progressbar, it is more focused on step-based progress visualization and offers more granular control over each step's appearance.

README

React Circular Progressbar

A circular progress indicator component, built with SVG. Easily customizable with CSS. See a live demo.

Installation

Install the npm module:

npm install react-circular-progressbar

Include the default styles into your CSS by copying src/styles.css into your repo.

Usage

Import the component:

import CircularProgressbar from 'react-circular-progressbar';

..and use the component in your JSX:

<CircularProgressbar percentage={60} />

Props

Name	Description
percentage	Numeric percentage to display, from 0-100. Required.
strokeWidth	Width of circlar line. Default: false.
initialAnimation	Toggle whether to animate progress starting from 0% on initial mount. Default: false.
classForPercentage	Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: (percent) => percent < 100 ? 'incomplete' : 'complete'.
textForPercentage	Function which returns text to display, can be configured based on percentage. Example: (pct) => `${pct}%` .

See the demo page JSX to see code used on the live demo page.

Development

To run demo locally on localhost:8080:

npm install
npm start

Keep CI tests passing by running npm test and npm run lint often.