A simple, styleable and easy to use donut component.

---

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:

---

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 = () => (
  <Donut>
    <DonutValue>70</DonutValue>
    <DonutLabel>My label</DonutLabel>
  </Donut>
);

Preview:

---

Styling:

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

See API

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:

---

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>
);

Preview:

---

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

That's all 😉

Contributors

@guilhermefront

LICENSE

MIT