quick-gauge

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="%"
/>