reactjs-percentage-circle

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.

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