React Battery Level

Simple customizable battery component!

목차

• Installation
• Usage
• Props
• License

Features

Installation

npm i react-battery-level

Usage

import BatteryLevel from 'react-battery-level';

function App() {
  return (
    <BatteryLevel
      width="250"
      gauge={75}
      isCharging
      borderStyles={{
        color: '#000',
      }}
    />
  );
}

export default App;

Props

BatteryLevel 컴포넌트는 다음과 같은 props를 받습니다:

Prop	Type	Default	Description
width	number | string	"150"	Optional. The width of the battery icon.
height	number | string	"100%"	Optional. The height of the battery icon.
gauge	number	None	Required. The charge level of the battery (0-100).
gaugeColor	string	"#34C759"	Optional. The color of the battery fill.
isCharging	boolean	false	Optional. Indicates if the battery is charging.
showPercentage	boolean	false	Optional. Shows the battery percentage inside the SVG.
borderStyles	object	{}	Optional. Styling for the border.
lightningStyles	object	{}	Optional. Styling for the lightning bolt.
percentageStyles	object	{}	Optional. Styling for the battery percentage text.

borderStyles Object

Key	Type	Default	Description
color	string	"black"	Stroke color for the battery border.
strokeWidth	number	1	Stroke width for the battery border.
radius	number	5	Border radius for the battery.

lightningStyles Object

Key	Type	Default	Description
fill	string	"yellow"	Fill color for the lightning bolt.
stroke	string	none	Stroke color for the lightning bolt.
strokeWidth	number	0.5	Stroke width for the lightning bolt.
position	object	{ x: 15, y: -1 }	Position of the lightning bolt.
transform	object	{ scale: 1, rotate: 10 }	Transform properties for the lightning bolt.

percentageStyles Object

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

License

MIT