quick-gauge

A very simple gauge without the fuss. An immediate solution for immediate needs.

Install

npm install quick-gauge

Demo

https://codesandbox.io/s/guage-q7bghr?file=/src/App.js

Available Parameters

| Param | Description | useage | |-----------------|--------------------------------------------------------------------------------------------------------------|----------------------------| | meterColor | Define a colour for the active part of the gauge. | meterColor ="#0113B3" | | backgroundColor | Define a colour for the non-active background of the gauge. | backgroundColor ="#6B7AFF" | | innerColor | This is the colour on the inner mask area of the gauge. You can change default white to another colour. | innerColor ="red" | | value * | * Required. This sets the meter value set as a percentage (ideally a number between 1 - 100) | value="23" | | size | Custom size override for gauge. A higher number decreases the gauge size whilst lower number increase size. | size="12" | | suffix | Optional addition for value, sits to the left of the output value. | suffix="%" |

Getting Started

import Index from "./guage";

export default function App() {
    return (
        <>
            <Guage
                value="33"
                size=6
            />
        </>
    );
}

Basic

<Guage
    value="33"
/>

Advanced

<Guage
    meterColor="#0113B3"
    backgroundColor="#6B7AFF"
    innerColor="#fff"
    value="46"
    size=12
    suffix="%"
/>