reactjs-percentage-circle

KO | EN

gitlite — search

#javascript #hacktoberfest #react #llm #android #machine-learning #rust #linux #macos #java #windows #vue #pytorch #open-source

reactjs-percentage-circle

(★ 22)

🐟 a react component to show percentage circle

reactjs-percentage-circle 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# reactjs-percentage-circle

[![npm](https://img.shields.io/npm/v/reactjs-percentage-circle.svg?maxAge=2592000)]()
![Node Version](https://img.shields.io/node/v/reactjs-percentage-circle.svg "Node Version")
[![Build Status](https://travis-ci.org/JackPu/reactjs-percentage-circle.svg?branch=master)](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() {
  <div>
    <PercentageCircle percent={80}></PercentageCircle>
    <PercentageCircle percent={80}>
      <p>Children</p>
    </PercentageCircle>
  </div>
}

```

## 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   | `<Text>123</Text>` | define the children component in the circle |

## Contributions

Your contributions and suggestions are welcome 😁😁🌹🌹🌠🌠

## MIT License

reactjs-percentage-circle

reactjs-percentage-circle 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

reactjs-percentage-circle

reactjs-percentage-circle 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README