Gauge API

API documention for Gauge.

The Gauge component only requires the value prop and supports many props to customize it according to your needs.

Property	Description	Default
value	The value of the Gauge. It should be a number between 0 and 100.
size	Width and height of the Gauge. It can be one of the following sizes: `xs`,`sm`, `md`, `lg`, `xl`, `2xl`, or a numeric value as `number` or `string`.	`md`
gapPercent	Percentage of the total circumference that represents a gap between primary and secondary arcs.	`5`
strokeWidth	Stroke width of the Gauge.	`10`
variant	Direction of the Gauge's animation.	`ascending`
showValue	Option to display the numeric value inside the Gauge.	`false`
showAnimation	Option to animate the Gauge's progress.	`false`
primary	Primary color or set of colors for the Gauge, with optional threshold values to determine color changes. Default primary color scale goes as red (0-25) -> amber (26-50) -> blue (51-75) -> green (76-100).
secondary	Secondary color or set of colors for the Gauge, similar to `primary`. Default secondary color is gray.
props	Any other prop accepted by a React SVG element.

React Server Component?

Not yet. Gauge depends on state and effects (for now). So, if you are using server components, you need to add the 'use client' React directive at the top of a file, above your imports.

src/components/component.tsx

'use client'
            
import { Gauge } from '@suyalcinkaya/gauge'

export function Component(): JSX.Element {
  return (
    <Gauge value={23} />
  )
}

src/app/page.tsx

import { Component } from 'src/components/component'

export default function Home(): JSX.Element {
  return (
    <Component />
  )
}