React Score Indicator

React component to display a score with a doughnut chart

Demo

Install

``bash
npm install --save react-score-indicator
`

Usage

`jsx
import React, { Component } from 'react'

import ReactStoreIndicator from 'react-score-indicator'

class Example extends Component {
render () {
return (
value={30}
maxValue={100}
/>
)
}
}
`

Props

| Name | Type | Default | Description | Required |
|:----------:|:------:|:----------:|:------------------------------------------------------------:|:--------:|
| value | number | | Value of score | yes |
| maxValue | number | | Value of max total score | yes |
| width | number | 200 | Width of component | no |
| stepColors | array | view below | Array with _n_ hex colors corresponding to steps in the chart| no |
| lineWidth | number | 5 | Width of line | no |
| lineGap | number | 5 | Space between the lines | no |
|fadedOpacity| number | 40 | Opacity percentage of the "disabled" steps | no |
| style | object | {} | Style to customize the component wrapper | no |
| textStyle | object | {} | Style to customize the score value text inside the chart | no |

DEFAULT COLOR PALETTE
`js
[
'#d12000',
'#ed8d00',
'#f1bc00',
'#84c42b',
'#53b83a',
'#3da940',
'#3da940',
'#3da940',
]
``

License

MIT © tomma5o