Circular Gauge Component for React Apps

Description:

Gauge is an aesthetic and customizable circular SVG gauge component for React applications.

It can be easily integrated into React projects to display data visually as a gauge or circular progress bar.

Ideal for real-time data representation in applications like dashboards.

How to use it:

1. Install and import the Gauge component into your React app.

# Yarn
$ yarn add @suyalcinkaya/gauge
# NPM
$ npm install @suyalcinkaya/gauge
# PNPM
$ pnpm install @suyalcinkaya/gauge
# BUN
$ bun add @suyalcinkaya/gauge
import { Gauge } from '@suyalcinkaya/gauge'

2. Add the Gauge component to the app and specify the initial value as follows:

<Gauge value={23} />

3. Available component props to customize the Gauge.

  • value – Current value of the gauge, expressed as a percentage.
  • size – Width and height of the gauge. Defaults to ‘md’.
  • gapPercent – Percentage of the total circumference that represents a gap in the gauge. Defaults to 5%.
  • strokeWidth – Stroke width of the gauge. Defaults to 10px.
  • variant – Direction of the gauge’s animation. Defaults to ‘ascending’.
  • showValue – Option to display the numeric value inside the gauge. Defaults to false.
  • showAnimation – Option to animate the gauge’s progress. Defaults to false.
  • primary – Primary color or set of colors for the gauge, with optional threshold values to determine color changes.
  • secondary – Secondary color or set of colors for the gauge, similar to `primary`.
  • props – Configuration and properties for the svg.

Preview:

Circular Gauge Component for React Apps

Tags:

Add Comment