# 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](https://umerbhat.github.io/react-battery-gauge/) ## Short Demo ![Short Demo](demo/demo1.gif)

Latest version **1.0.7** (published 2024-02-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-battery-gauge
pnpm add react-battery-gauge
yarn add react-battery-gauge
bun add react-battery-gauge
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2024-02-29 |
| First published | 2021-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 225.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Umer Bhat |
| Maintainers | umerbhat |
| Keywords | battery, react, gauge, SVG battery, battery status, battery meter, battery gauge, battery cells |

## Links

- npm: https://www.npmjs.com/package/react-battery-gauge
- Repository: https://github.com/Umerbhat/react-battery-gauge
- Homepage: http://umerbhat.github.io/react-battery-gauge
- Issues: https://github.com/Umerbhat/react-battery-gauge/issues
- npm.io page: https://npm.io/package/react-battery-gauge

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2024-02-29
- 1.0.6 — 2023-11-17
- 1.0.5 — 2023-04-09
- 1.0.4 — 2022-12-28
- 1.0.3 — 2022-02-09
- 1.0.2 — 2022-01-02
- 1.0.1 — 2021-12-27
- 1.0.0 — 2021-12-27
- 0.1.0 — 2021-12-26

## README

# 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](https://umerbhat.github.io/react-battery-gauge/)
## Short Demo
![Short Demo](demo/demo1.gif)
## Storybook Demo

[Click here](https://master--61c950606cc89f003a4379c2.chromatic.com/)

## Usage

Install it by running 
```bash
npm install react-battery-gauge # or yarn add react-battery-gauge
```
## Include the component:

```jsx
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<TGaugeCustom>     |

## Override any customization default values:
```js
{
  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
  },
}
```


## License

MIT

**Free Software, Your contribution is welcome!**

---
_Source: https://npm.io/package/react-battery-gauge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._