Reactjs-percentage-circle

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.

This is a screenshot of the Demo
Start
npm i reactjs-percentage-circle --save
;//...{<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 😄💐