React Liquid Gauge TypeScript

A beautiful, animated liquid fill gauge component for React applications with full TypeScript support. Built with Vite for optimal performance.

Features

• 🎨 Fully Customizable - Control colors, sizes, fonts, and more
• 🌊 Smooth Animations - Beautiful wave animations with customizable speed
• 📱 Responsive - Works perfectly on all screen sizes
• 💪 TypeScript - Full TypeScript support with type definitions
• ⚡ Vite Powered - Built with Vite for optimal performance
• 🎯 Zero Dependencies - No external dependencies (except React)
• 🔧 Easy to Use - Simple API, works out of the box

Installation

npm install react-liquid-gauge-typescript

or with yarn:

yarn add react-liquid-gauge-typescript

or with pnpm:

pnpm add react-liquid-gauge-typescript

Usage

Basic Example

import { LiquidFillGauge } from 'react-liquid-gauge-typescript';

function App() {
  return (
    <LiquidFillGauge
      value={75}
      width={200}
      height={200}
    />
  );
}

Advanced Example

import { LiquidFillGauge } from 'react-liquid-gauge-typescript';

function App() {
  const [value, setValue] = useState(75);

  return (
    <div>
      <LiquidFillGauge
        value={value}
        width={400}
        height={400}
        color="#4682B4"
        waveColor="#4682B4"
        textColor="#000000"
        fontSize={48}
        fontFamily="Arial"
      />
      
      <input
        type="range"
        min="0"
        max="100"
        value={value}
        onChange={(e) => setValue(Number(e.target.value))}
      />
    </div>
  );
}

Multiple Gauges

import { LiquidFillGauge } from 'react-liquid-gauge-typescript';

function Dashboard() {
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <LiquidFillGauge
        value={25}
        width={150}
        height={150}
        color="#e74c3c"
        waveColor="#e74c3c"
        textColor="#ffffff"
      />
      <LiquidFillGauge
        value={50}
        width={150}
        height={150}
        color="#f39c12"
        waveColor="#f39c12"
        textColor="#ffffff"
      />
      <LiquidFillGauge
        value={75}
        width={150}
        height={150}
        color="#2ecc71"
        waveColor="#2ecc71"
        textColor="#ffffff"
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | number | Required | The percentage value to display (0-100) | | width | number | 200 | Width of the gauge in pixels | | height | number | 200 | Height of the gauge in pixels | | color | string | #4682B4 | Color of the outer circle border | | waveColor | string | #4682B4 | Color of the liquid wave | | textColor | string | #000000 | Color of the percentage text | | fontSize | number | 20 | Font size of the percentage text | | fontFamily | string | Arial | Font family of the percentage text |

TypeScript

This package includes TypeScript definitions out of the box. The component is fully typed:

import { LiquidFillGauge, LiquidFillGaugeProps } from 'react-liquid-gauge-typescript';

const props: LiquidFillGaugeProps = {
  value: 75,
  width: 200,
  height: 200,
  color: '#4682B4',
};

function App() {
  return <LiquidFillGauge {...props} />;
}

Animation Details

• Initial Animation: The gauge animates from 0% to the specified value over 2 seconds
• Continuous Wave: After reaching the target value, the wave continues to animate smoothly
• Text Animation: The percentage text counts up smoothly to match the fill level

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

To run the development environment:

git clone https://github.com/yourusername/react-liquid-gauge-typescript.git
cd react-liquid-gauge-typescript
npm install
npm run dev

To build the library:

npm run build:lib

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Rasik Nizam]

Credits

Built with ❤️ using React, TypeScript, and Vite.