0.1.18 • Published 1 year ago
quick-gauge v0.1.18
quick-gauge
A very simple gauge without the fuss. An immediate solution for immediate needs.
Install
npm install quick-gaugeDemo
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="%"
/>