Just for Fun: Create a Battery Indicator with React (Works Only in Chrome)

In this article, we’re going to build a fun project — a battery indicator component using React. This component will show you the current battery level and whether your device is charging.

However, our battery indicator will rely on the Navigator.getBattery() method to retrieve battery information which is not supported by Mozilla and Safari browsers. And also it’s available only in secure contexts (HTTPS).

This means that our component will only work on Chrome and other Chromium-based browsers like Edge.

So, that’s why it’s more of a fun project than a practical one.

Let’s get started!

1. Create a new React project using Vite and the React template.

Run the following commands to create a new React project using Vite and the React template.

npm create vite@latest battery-indicator - …