React-ts-liquid-gauge NPM

React TS Liquid Gauge component

React TS Liquid Gauge component with circle and rectangle shape. It's heavily inspired by react-liquid-gauge.

Installation

npm install react-ts-liquid-gauge

Usage

import LiquidFillGauge from "react-ts-liquid-gauge";

function App() {
  return (
    <>
      <LiquidFillGauge
        value={70}
        waveAnimation={true}
        waveFrequency={3}
        waveAmplitude={0.5}
        gradient={true}
        riseAnimation={true}
        riseAnimationTime={1000}
        textStyle={{ fill: "#fff" }}
        waveTextStyle={{ fill: "#85ebff" }}
        shapeStyle={{ fill: "#056" }}
        waveStyle={{ fill: "#056" }}
        shapeType="rectangle"
      />
    </>
  );
}

export default App;

Props

Prop Name	Type	Default	Description
value	number	0	The value to display in the gauge (0-100)
width	number	200	Width of the gauge
height	number	200	Height of the gauge
shapeType	'circle' \| 'rectangle'	'circle'	Shape of the gauge
textSize	number	1	Size multiplier for the text
textOffsetX	number	0	X offset for the text position
textOffsetY	number	0	Y offset for the text position
textRenderer	(value: number) => string	(value) => `${value}%`	Function to customize the displayed text
riseAnimation	boolean	false	Enable/disable rise animation
riseAnimationTime	number	2000	Duration of rise animation in milliseconds
riseAnimationEasing	string	'cubicInOut'	Easing function for rise animation
waveAnimation	boolean	false	Enable/disable wave animation
waveFrequency	number	2	Number of waves
waveAmplitude	number	1	Height of waves
waveSpeed	number	0.25	Speed of wave animation
gradient	boolean	false	Enable/disable gradient effect
gradientStops	Array<{offset: string, color: string}>	-	Custom gradient stops
onClick	() => void	undefined	Click handler for the gauge
textStyle	React.CSSProperties	{}	Style object for the text
waveTextStyle	React.CSSProperties	{}	Style object for the text when inside wave
shapeStyle	React.CSSProperties	{}	Style object for the gauge shape
waveStyle	React.CSSProperties	{}	Style object for the wave