1.1.0 • Published 4 years ago

react-es6-progressbar.js v1.1.0

Weekly downloads
452
License
MIT
Repository
github
Last release
4 years ago

React ES6 ProgressBar.js

A React component library that implements kimmobrunfeldt's ProgressBar.js with full options support.

Installation

$ npm install --save react-es6-progressbar.js

Usage

import React, { Component } from 'react';
import { Circle, SemiCircle, Line } from 'react-es6-progressbar.js'

class App extends Component{

  const circle_options = {
    text: 'test',
    style: {
      color: 'green'
    }
  };

  const semicircle_options = {
    text: {
      value: 'semicircle test',
      color: 'rgba(255, 255, 255, 0.6)
    },
    color: '#333',
    duration: 1000
  };

  const line_options = {
    color: 'red',
    easing: 'easeOut',
    strokeWidth: '5'
  };

  render(){

    return(

      <Circle progress={0.75} options={circle_options} container_style={{height: '200px', width: '200px'}} />
      <SemiCircle progress={0.33} options={semicircle_options} container_style={{height: '200px', width: '200px'}} />
      <Line progress={1.0} options={line_options} container_style={{height: '200px', width: '200px'}} />

    );

  }

}

Props

PropTypeDefaultUsage
container_classStringnullClass to be added to container element
container_styleObjectnullCSS styles for the container element
progressNumber0.5ProgressBar.js progress amount from 0 to 1, where 1 is 100% of the distance.
optionsObjectnullProgressBar.js shape container options

Licence

MIT

1.1.0

4 years ago

1.0.20

6 years ago

1.0.19

6 years ago

1.0.18

6 years ago

1.0.17

6 years ago

1.0.16

6 years ago

1.0.15

6 years ago

1.0.14

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago