React Liquid Rectangle Gauge

A beautiful, animated liquid fill rectangle gauge component for React applications with full TypeScript support.

Features

• 🎨 Fully Customizable - Control colors, sizes, border radius, and wave properties
• 🌊 Smooth Animations - High-performance SVG wave animations
• 📱 Responsive - Works perfectly on all screen sizes
• 💪 TypeScript - Full TypeScript support with type definitions
• 🎯 Zero Dependencies - No external dependencies (except React)

Installation

npm install react-liquid-rectangle-gauge

Usage

import { LiquidRectangleGauge } from 'react-liquid-rectangle-gauge';

function App() {
  return (
    <LiquidRectangleGauge
      value={65}
      width={150}
      height={250}
      borderRadius={15}
      color="#4682B4"
      waveColor="#4682B4"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | number | Required | The percentage value to display (0-100) | | width | number | 150 | Width of the gauge | | height | number | 250 | Height of the gauge | | color | string | #4682B4 | Border color | | waveColor | string | #4682B4 | Liquid color | | borderRadius | number | 12 | Corner radius | | waveAmplitude | number | 10 | Height of the waves | | waveFrequency | number | 2 | Number of wave cycles |

License

MIT © [Rasik Nizam]