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:
