react-donut-component

A simple, styleable and easy to use donut component.

---

![downloads][downloads-badge]
[![MIT License][license-badge]][license]
!npm

Install

``
npm install react-donut-component
`

Usage

> [Try it out in the browser][code-sandbox-try-it-out]

`jsx
import React from 'react'
import { Donut } from 'react-donut-component'

const App = () => (
70
);

`
#### Preview:
!donut-example

---

$3

> When you put a label, you have to specify the value with DonutValue component
`jsx
import React from 'react'
import { Donut, DonutValue, DonutLabel } from 'react-donut-component'

const App = () => (

70
My label

);

`
#### Preview:
!donut-example

---

$3

> There are many style props with the format 'styleSomething'.

See API
`jsx
import React from 'react'
import { Donut, DonutValue, DonutLabel } from 'react-donut-component'

const App = () => (
styleTrack={{ strokeWidth: 9, stroke: 'AliceBlue' }}
styleIndicator={{ stroke: 'Cyan', strokeLinecap: 'round' }}
>
style={{ fontWeight: 'bold' }}
symbol='°C'
styleSymbol={{ fontWeight: 'bold', fontSize: '18px' }}
symbolPosition='top-right'
>
79


);
`
#### Preview:
!donut-example

---

Usage with multiple values

We provide a component called DonutMultiple, which can receive multiple DonutElement values that are calculated relatively.

`jsx
import React from 'react'
import { DonutMultiple, DonutElement, DonutLabel } from 'react-donut-component'

const App = () => (

6
5
Ballon d'ors

);
``
#### Preview:
!donut-example

---

#### See the API and more examples like this in the: the story book



That's all :wink:

Contributors

@gsdeveloper

LICENSE

MIT

[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[build-badge]:
https://img.shields.io/travis/downshift-js/downshift.svg?style=flat-square
[build]: https://travis-ci.org/downshift-js/downshift
[coverage-badge]:
https://img.shields.io/codecov/c/github/downshift-js/downshift.svg?style=flat-square
[coverage]: https://codecov.io/github/downshift-js/downshift
[version-badge]: https://img.shields.io/npm/v/downshift.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-donut-component
[downloads-badge]: https://img.shields.io/npm/dm/react-donut-component
[license-badge]: https://img.shields.io/npm/l/downshift.svg?style=flat-square
[license]: https://github.com/downshift-js/downshift/blob/master/LICENSE
[code-sandbox-try-it-out]:
https://codesandbox.io/s/react-donut-component-example-cy1yb?file=/src/App.tsx