reactjs-percentage-circle

1.0.0 • Public • Published

Reactjs-percentage-circle

npm Node Version Build Status

Reactjs-percentage-circle is a component which supports you define your percent and draw the circle.And also you can use it as a progress bar.And you can show some data in a circle you want.

React Native Version

This is a screenshot of the Demo

Demos

Start

npm i reactjs-percentage-circle --save
 
 
import PercentageCircle from 'reactjs-percentage-circle';
 
//...
 
render() {
  <div>
    <PercentageCircle percent={80}></PercentageCircle>
    <PercentageCircle percent={80}>
      <p>Children</p>
    </PercentageCircle>
  </div>
}
 

Options

Props Type Example Description
color string '#000' the color of border
bgcolor string '#e3e3e3' the background color of the circle
innerColor string '#fff' the color of the inside of the circle
percent Number 30 the percent you need
radius Number 20 how large the circle is
borderWidth Number(default 2) 5 the width of percentage progress bar
textStyle Array {fontSize: 24, color: 'red'} define the style of the text which in the circle
children jsx <Text>123</Text> define the children component in the circle

Contributions

Your contributions and suggestions are welcome 😄💐

MIT License

Package Sidebar

Install

npm i reactjs-percentage-circle

Weekly Downloads

186

Version

1.0.0

License

MIT

Last publish

Collaborators

  • jack_pu