https://github.com/jackpu/reactjs-percentage-circle
🐟 a react component to show percentage circle
https://github.com/jackpu/reactjs-percentage-circle
circle percentage react
Last synced: 10 months ago
JSON representation
🐟 a react component to show percentage circle
- Host: GitHub
- URL: https://github.com/jackpu/reactjs-percentage-circle
- Owner: JackPu
- License: mit
- Created: 2017-03-14T02:06:45.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-09-15T13:36:27.000Z (almost 4 years ago)
- Last Synced: 2025-04-12T05:53:43.618Z (about 1 year ago)
- Topics: circle, percentage, react
- Language: JavaScript
- Homepage: http://events.jackpu.com/reactjs-percentage-circle/
- Size: 54.7 KB
- Stars: 22
- Watchers: 2
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reactjs-percentage-circle
[]()
[](https://travis-ci.org/JackPu/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](https://github.com/JackPu/react-native-percentage-circle)
*This is a screenshot of the Demo*
[Demos](http://events.jackpu.com/reactjs-percentage-circle/index.html)
## Start
### Npm
``` bash
$ npm i reactjs-percentage-circle --save
```
### Yarn
``` bash
$ yarn add reactjs-percentage-circle
```
``` js
import PercentageCircle from 'reactjs-percentage-circle';
//...
render() {
Children
}
```
## Props
| 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 | `123` | define the children component in the circle |
## Contributions
Your contributions and suggestions are welcome 😁😁🌹🌹🌠🌠
## MIT License