React-battery-gauge NPM

React Battery Gauge

This library is a SVG based react component for displaying battery status, ultra lightweight, highly customizable with zero dependencies

Live Demo

Click here

Short Demo

Storybook Demo

Click here

Usage

Install it by running

npm install react-battery-gauge # or yarn add react-battery-gauge

Include the component:

import BatteryGauge from 'react-battery-gauge'

<BatteryGauge value={40} />

Options

Name	Description	Default	type
value	Meter value range 0-maxValue(100)	50	number
maxValue	Meter max value	100	number
orientation	Changes orientation, keeping text horizontal	"horizontal"	"horizontal"\| "vertical"
padding	Padding of gauge within canvas	5	number
size	We don't like passing both width and height, can create unusual looking shape. Size will help gauge to achieve the desired size maintaining aspect ratio	300	number
aspectRatio	Gauge aspect ratio, At padding 0 easy to create battery types -> D = 0.56, C = 0.52, AA = 0.28, AAA = 0.23, AAAA = 0.19 , default C battery	0.52	number
animated	Enable animation on mount	false	boolean
charging	Enable charging mode	false	boolean
customization	All individual components customisation	GaugeCustom	Partial

Override any customization default values:

{
  batteryBody: {
    strokeWidth: 4,
    cornerRadius: 6,
    fill: 'none',
    strokeColor: '#111'
  },
  batteryCap: {
    fill: 'none',
    strokeWidth: 4,
    strokeColor: '#111',
    cornerRadius: 2,
    capToBodyRatio: 0.4
  },
  batteryMeter: {
    fill: 'green',
    lowBatteryValue: 15,
    lowBatteryFill: 'red',
    outerGap: 1,
    noOfCells: 1, // more than 1, will create cell battery
    interCellsGap: 1
  },
  readingText: {
    lightContrastColor: '#111',
    darkContrastColor: '#fff',
    lowBatteryColor: 'red',
    fontFamily: 'Helvetica',
    fontSize: 14,
    showPercentage: true
  },
  chargingFlash: {
    scale: undefined,
    fill: 'orange',
    animated: true,
    animationDuration: 1000
  },
}