react-donut-component
v2.2.6
Published
A simple and styleable donut component
Downloads
1,424
Maintainers
Readme
Install
npm install react-donut-component
Usage
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'.
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 :wink:
Contributors
@gsdeveloper
LICENSE
MIT