@kjanat/react-gauge-component
Advanced tools
A customizable gauge/speedometer component for React applications
A customizable, animated gauge/speedometer component for React applications. Perfect for dashboards, analytics displays, and progress indicators.
npm install @kjanat/react-gauge-component
# or
yarn add @kjanat/react-gauge-component
# or
pnpm add @kjanat/react-gauge-component
import { Gauge } from '@kjanat/react-gauge-component';
import '@kjanat/react-gauge-component/dist/styles.css';
function App() {
return <Gauge value={75} min={0} max={100} label="Performance" />;
}
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 2.5 | Current value to display |
min | number | 0 | Minimum value of the gauge |
max | number | 5 | Maximum value of the gauge |
label | string | '' | Label text displayed below the gauge |
displayType | 'percentage' | 'value' | 'custom' | 'percentage' | How to display the current value |
customDisplay | (value: number) => string | null | Custom function to format the display value |
tickInterval | number | 1 | Interval between tick marks |
showTicks | boolean | true | Whether to show tick marks and labels |
colors | string[] | ['#22c55e', '#10b981', '#84cc16', '#eab308', '#f59e0b', '#ef4444'] | Array of colors for gauge segments |
size | number | 300 | Width of the gauge in pixels |
thickness | number | 40 | Thickness of the gauge arc |
className | string | '' | Additional CSS class for styling |
lightTheme | ThemeColors | See below | Custom colors for light mode |
darkTheme | ThemeColors | See below | Custom colors for dark mode |
autoDetectTheme | boolean | true | Automatically detect and apply dark mode |
showTextOutline | boolean | true | Show text outline effect on value text |
<Gauge value={3.5} min={0} max={5} label="Score" />
<Gauge value={75} min={0} max={100} label="Progress" displayType="percentage" />
<Gauge
value={85}
min={0}
max={100}
label="Speed"
displayType="custom"
customDisplay={(val) => `${val} km/h`}
/>
<Gauge
value={7}
min={0}
max={10}
label="Rating"
colors={['#ef4444', '#f59e0b', '#22c55e']}
tickInterval={2}
/>
// Small gauge
<Gauge value={50} size={200} thickness={30} />
// Large gauge
<Gauge value={50} size={400} thickness={60} />
The component automatically detects dark mode based on:
dark class on <html> or <body>prefers-color-scheme: dark// Automatic dark mode detection (default)
<Gauge value={3.5} min={0} max={5} />
// Custom theme colors
<Gauge
value={3.5}
min={0}
max={5}
lightTheme={{
background: '#f3f4f6',
tickColor: '#6b7280',
needleColor: '#111827',
needleCenter: '#e5e7eb',
textOutline: '#ffffff'
}}
darkTheme={{
background: '#111827',
tickColor: '#d1d5db',
needleColor: '#f9fafb',
needleCenter: '#4b5563',
textOutline: '#000000'
}}
/>
// Disable automatic theme detection
<Gauge value={3.5} autoDetectTheme={false} />
interface ThemeColors {
background?: string; // Inner arc background
tickColor?: string; // Tick marks color
needleColor?: string; // Needle body color
needleCenter?: string; // Needle center dot color
textOutline?: string; // Text outline effect color
valueTextColor?: string; // Value text color (auto-contrasts with background if not set)
}
The component comes with default styles that you need to import:
import '@kjanat/react-gauge-component/dist/styles.css';
You can override the default styles using the className prop or by targeting the component's CSS classes:
.gauge-container - Main container.gauge-svg - SVG element.gauge-tick-label - Tick mark labels.gauge-value - Value display.gauge-label - Label text# Install dependencies
pnpm install
# Run development server with examples
pnpm dev
# Build the library
pnpm build:lib
# Type checking
pnpm type-check
# Run linting
pnpm lint
# Run unit tests
pnpm test
# Run E2E tests
pnpm test:e2e
This project includes comprehensive test coverage:
Unit tests are written with Vitest and React Testing Library:
# Run tests once
pnpm test
# Run tests in watch mode
pnpm test:watch
# Run tests with UI
pnpm test:ui
# Run tests with coverage
pnpm test:coverage
End-to-end tests are written with Playwright to verify dark mode functionality across browsers:
# Run E2E tests
pnpm test:e2e
# Run E2E tests with UI mode
pnpm test:e2e:ui
# Debug E2E tests
pnpm test:e2e:debug
# Show test report
pnpm test:e2e:report
The E2E tests verify:
MIT © Kaj Kowalski
Contributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature')git push origin feature/amazing-feature)FAQs
A customizable gauge/speedometer component for React applications
The npm package @kjanat/react-gauge-component receives a total of 8 weekly downloads. As such, @kjanat/react-gauge-component popularity was classified as not popular.
We found that @kjanat/react-gauge-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A new federal program will let vetted U.S. cybersecurity firms help investigate and disrupt foreign cybercrime groups under government direction.
Research
/Security News
The campaign amassed more than 75,000 installs by targeting Russian-speaking users seeking access to blocked services.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.