Registry / web-framework / react-gauge-component

react-gauge-component

library2.0.28jsnpmunverified

react-gauge-component is a customizable React component designed for displaying gauge charts, often used for data visualization like speedometers or Grafana-style gauges. The current stable version is 2.0.28, with frequent patch and minor updates within the 2.x series. It was forked from `@Martin36/react-gauge-chart` and significantly re-architected in its v2 release to provide enhanced customization options and modern React compatibility. Key differentiators include robust TypeScript support, a flexible API for segment and value rendering, and an online sandbox editor for easy configuration. It requires React 16.8.2 or newer as a peer dependency, ensuring broad compatibility with contemporary React ecosystems.

web-framework

npm install react-gauge-component

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-GAUGE-COMPON

react-gauge-component

web-frameworkjavascriptv2.0.28

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

GaugeComponent

✓ import GaugeComponent from 'react-gauge-component';

✗ const GaugeComponent = require('react-gauge-component');

While the README implies both default and named imports work, the canonical way for components is often a default export. Prefer named imports for library functions.

GaugeComponent (Named)

✓ import { GaugeComponent } from 'react-gauge-component';

✗ import GaugeComponent from 'react-gauge-component';

Some build tools or environments might prefer or enforce named imports, especially if the module is internally using `export { GaugeComponent }`.

GaugeComponent (Next.js Dynamic Import)

✓ import dynamic from 'next/dynamic'; const GaugeComponent = dynamic(() => import('react-gauge-component'), { ssr: false });

✗ import GaugeComponent from 'react-gauge-component';

This component manipulates the DOM, which requires a browser environment. For Next.js or other SSR frameworks, dynamic import with `ssr: false` is essential to prevent 'document is not defined' errors.

This quickstart demonstrates installing the package and rendering a basic gauge component with custom colored arcs, a value, and a formatted label.

import React from 'react'; import GaugeComponent from 'react-gauge-component'; function MyGauge() { return ( <div style={{ width: '300px', height: 'auto' }}> <GaugeComponent arc={{ width: 0.2, padding: 0.005, cornerRadius: 1, subArcs: [ { limit: 15, color: '#EA4228', showPoint: true }, { limit: 35, color: '#F5CD19', showPoint: true }, { limit: 65, color: '#5BE12C', showPoint: true }, { limit: 100, color: '#444444', showPoint: true } ] }} value={75} labels={{ valueLabel: { formatTextValue: value => value + ' km/h' } }} /> </div> ); } export default MyGauge;

Debug

Known issues

breakingThe package underwent a major refactor and API overhaul with the release of v2.0.20. Code written for v1.x is not directly compatible with v2.x and requires migration.

fix

Refer to the official API documentation for v2.x (API.md on GitHub) and the demo page to update component props and structure. The core API for `arc`, `value`, and `labels` has changed.

affects: >=2.0.20

gotchaWhen using `react-gauge-component` within Server-Side Rendering (SSR) frameworks like Next.js, importing the component directly will lead to 'document is not defined' errors because the component expects a browser DOM environment.

fix

Use dynamic imports with `ssr: false` (e.g., `const GaugeComponent = dynamic(() => import('react-gauge-component'), { ssr: false });`) to ensure the component is only loaded on the client-side.

affects: >=1.0.0

gotchaIncorrect or incompatible React and React-DOM peer dependencies can lead to runtime errors or unexpected behavior. The component relies on specific React features.

fix

Ensure your project's `react` and `react-dom` versions satisfy the peer dependency requirements (`^16.8.2 || ^17.0 || ^18.x || ^19.x`). Use `npm install` or `yarn install` to resolve peer dependency warnings.

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: document is not defined

Attempting to render `react-gauge-component` in a Server-Side Rendering (SSR) environment without disabling SSR for the component.

fix

For Next.js, use `const GaugeComponent = dynamic(() => import('react-gauge-component'), { ssr: false });`. For other SSR frameworks, ensure the component is only loaded client-side.

TypeError: Cannot read properties of undefined (reading 'current')

This error often indicates that a React ref is being accessed before it's attached to a DOM element, which can happen if the component tries to render too early or if there's a problem with the rendering lifecycle in an SSR context.

fix

This is often related to SSR issues. Apply dynamic import with `ssr: false` as described in the warnings. Also, ensure React and React-DOM peer dependencies are correctly installed and compatible.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

This common React error can occur if there are multiple versions of React loaded in your application, or if the rules of hooks are violated, sometimes indirectly due to incompatible peer dependencies.

fix

Check for duplicate React installations using `npm ls react` or `yarn why react`. Ensure `react` and `react-dom` peer dependencies are met and are singular in your dependency tree. Re-evaluate any custom rendering logic around the gauge component.

Upgrade

Version history

2.0.28latest on npm

Audit

Dependencies

reactrequiredRequired for rendering React components.

react-domrequiredRequired for rendering React components to the DOM.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/antoniolago/react-gauge-component ↗

packagehttps://www.npmjs.com/package/react-gauge-component ↗

homepagehttps://antoniolago.github.io/react-gauge-component/ ↗