Notifies your React app of the device battery status
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

🔋 React Device Battery

👀 In development

Notifies your React app of the device battery status

This component is based on the Battery Status API

The Battery Status API, more often referred to as the Battery API, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change.


Edit react-battery

📦 Installation

npm install react-device-battery

🚀 Load

// using es modules
import Battery from 'react-device-battery'

// common.js
const Battery = require('react-device-battery')

// AMD

Or use script tags and globals.

<script src=""></script>

And then grab it off the global like so:

const Battery = reactDeviceBattery

💡 Usage

Let's assume you want to check if you have enough battery before doing somenthing or you want to render based on how much battery you got left:

const App = () => (
    <h2>Magic is happening ⚡️</h2>
      onChange={(battery ) => {
      render={({ battery }) =>
        <p>Battery Level: {battery ? battery : <span>Not Supported</span>}.</p>

render(<App />, document.getElementById('root'));

If the Battery API is not supported, the render function is passed null.


render [required]

Default: null

Whatever you'd like to render in response to changes in the battery level

  render={({ battery }) =>
    <p>Battery Level: {battery ? battery : <span>Not Supported</span>}.</p>

onChange [optional]

Default: undefined

Called whenever the batter level changes

handleBatteryChange = ({ battery }) => {
  if (battery <= 10) {
    this.saveMyData(); // Oh my...

  render={({ battery }) =>
    <p>Battery Level: {battery ? battery : <span>Not Supported</span>}.</p>

Component info

This component has been built using React Render Callback pattern. Basically it is a way for the parent to provide some logic to the child, and the child have the control on how to execute that logic.


Released under MIT license.