Fluid Meter React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import FluidMeter from "./FluidMeter";

export default function Example() {
  return (
    <FluidMeter
      value={64}
      min={0}
      max={100}
      label={"Capacity"}
      color={"#7fa6c0"}
      background={"#192530"}
      size={230}
      speed={5}
    />
  );
}

Using Fluid Meter

Set min and max to describe the measurement's range, then pass the current reading through value.

Use label to name the measurement and valueLabel when the visible reading needs a custom unit or format. size controls the circular gauge's diameter.

Props

Name	Type	Required	Default	Description
value	number	No	0	Current numeric value, clamped to the configured range.
min	number	No	0	Minimum range value.
max	number	No	100	Maximum range value, constrained to exceed min.
label	string	No	""	Visible and accessible meter label.
valueLabel	string	No	undefined	Optional formatted value to display instead of a computed percentage.
color	string	No	"#8aacc6"	Liquid colour.
background	string	No	"#19222d"	Unfilled tank colour.
size	number	No	220	Preferred diameter in pixels, capped to container width.
speed	number	No	5	Wave duration in seconds.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.