react-score-indicator

    2.2.1 • Public • Published

    React Score Indicator

    React component to display a score with a doughnut chart


    Demo

    Install

    npm install --save react-score-indicator

    Usage

    import React, { Component } from 'react'
     
    import ReactStoreIndicator from 'react-score-indicator'
     
    class Example extends Component {
      render () {
        return (
          <ReactStoreIndicator
            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

    [
      '#d12000',
      '#ed8d00',
      '#f1bc00',
      '#84c42b',
      '#53b83a',
      '#3da940',
      '#3da940',
      '#3da940',
    ]

    License

    MIT © tomma5o

    Install

    npm i react-score-indicator

    DownloadsWeekly Downloads

    156

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    52.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • tomma5o