React Battery Level

Simple customizable battery component!

Features

• SVG-Based: Crisp and clean rendering at any size or resolution.
• Dynamic Gauge: Visual battery level represented by a customizable SVG fill.
• Charging State: Optional SVG lightning bolt icon for charging indication.
• Customizable Appearance: Configure the dimensions, color, and styles of the SVG elements.
• Percentage Display: Option to display the battery percentage text within the SVG.

Installation

npm install react-battery-level --save

Usage

import { useState } from "react";
import BatteryLevel from "react-battery-level";

function App() {
  const [gauge, setGauge] = useState(75);
  return (
    //Adjust only width to maintain aspect ratio.
    <BatteryLevel
      width="10vw"
      gauge={gauge}
      gaugeColor={gauge <= 20 ? "#FF5713" : "#6EF47A"}
      isCharging={true}
      isShowGaugePercentage={false}
      lightningBoltStyles={{
        fill: gauge <= 20 ? "#FF5713" : "#6EF47A",
        stroke: "white",
        strokeWidth: 0.5,
      }}
    />
  );
}
export default App;

Props

| Prop | Type | Default | Description | | ----------------------- | -------------------- | ----------- | ------------------------------------------------------ | | width | number | string | "100%" | Optional. The width of the SVG battery icon. | | height | number | string | "100%" | Optional. The height of the SVG battery icon. | | gauge | number | None | Required. The charge level of the battery (0-100). | | gaugeColor | string | "#6EF47A" | Optional. The color of the battery fill. | | isCharging | boolean | false | Required. Indicates if the battery is charging. | | isShowGaugePercentage | boolean | true | Optional. Shows the battery percentage inside the SVG. | | lightningBoltStyles | object | {} | Optional. Styling for the SVG lightning bolt. | | gaugePercentageStyles | object | {} | Optional. Styling for the battery percentage text. |

lightningBoltStyles Object

| Key | Type | Default | Description | | ------------- | -------------------- | --------- | ---------------------------------------- | | fill | string | "white" | SVG fill color for the lightning bolt. | | stroke | string | "black" | SVG stroke color for the lightning bolt. | | strokeWidth | number | string | 0.5 | SVG stroke width for the lightning bolt. |

gaugePercentageStyles Object

| Key | Type | Default | Description | | ---------- | -------------------- | --------- | ------------------------------------------ | | fontSize | number | string | 7 | Font size for the battery percentage text. | | color | string | "black" | Color for the battery percentage text. |

License

MIT