Quick-qauge NPM

quick-gauge

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

Install

npm install quick-gauge

Available Parameters

Param	Description	useage
meterColor	Define a colour for the active part of the guage.	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 in pecentage (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 (
        <>
            <Index
                value="33"
                size=6
            />
        </>
    );
}

Basic

<Index
    value="33"
/>

Advanced

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

react react-dom react-scripts styled-components

@everything-registry/sub-chunk-2514

0.1.0

1 year ago