React-donut-component NPM

downloads npm

Install

npm install react-donut-component

Usage

Try it out in the browser

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

const App = () => (  
  <Donut>70</Donut>
);

Preview:

donut-example

Setting a label:

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

const App = () => ( 70 My label );

#### Preview: 
![donut-example](https://i.ibb.co/wwbBkQw/image.png)

<hr />

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

[See API](https://5f711adb6ec1620022e842dc-wucwtrunim.chromatic.com/?path=/story/donut--simple-donut)
```jsx
import React from 'react'
import { Donut, DonutValue, DonutLabel } from 'react-donut-component' 

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

Preview:

donut-example

Usage with multiple values

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

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

const App = () => (
  <DonutMultiple>
    <DonutElement color='brown' name="Messi">6</DonutElement>
    <DonutElement color='black' name="CR7">5</DonutElement>
    <DonutLabel>Ballon d'ors</DonutLabel>
  </DonutMultiple>
);