https://github.com/zanonnicola/react-device-battery

Notifies your React app of the device battery status
https://github.com/zanonnicola/react-device-battery

battery javascript react-component

Last synced: about 1 month ago
JSON representation

Notifies your React app of the device battery status

• Host: GitHub
• URL: https://github.com/zanonnicola/react-device-battery
• Owner: zanonnicola
• Created: 2017-09-24T14:59:15.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-25T11:37:20.000Z (over 5 years ago)
• Last Synced: 2024-04-29T19:08:38.459Z (2 months ago)
• Topics: battery, javascript, react-component
• Language: JavaScript
• Size: 32.2 KB
• Stars: 35
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-react-render-props - react-device-battery
• awesome-react-render-props - react-device-battery

README

        
# 🔋 React Device Battery

> 👀 In development

Notifies your React app of the device battery status

This component is based on the [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/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.__

## Demo

[![Edit react-battery](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3kp5mjkj81)

## :package: Installation

```bash

npm install react-device-battery

```

## :rocket: Load

```js

// using es modules

import Battery from 'react-device-battery'

// common.js

const Battery = require('react-device-battery')

// AMD

```

Or use script tags and globals.

```html

```

And then grab it off the global like so:

```js

const Battery = reactDeviceBattery

```

## :bulb: 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:

```javascript

const App = () => (

  


    
Magic is happening ⚡️

     {

        console.log(battery)

      }}

      render={({ battery }) =>

        
Battery Level: {battery ? battery : Not Supported}.

      } 

    />

  

);


render(, document.getElementById('root'));

```

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

## Props

#### `render` [required]

Default: `null`

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

```javascript

    
Battery Level: {battery ? battery : Not Supported}.

  } 

/>

```


#### `onChange` [optional]

Default: `undefined`

Called whenever the batter level changes

```javascript

handleBatteryChange = ({ battery }) => {

  if (battery <= 10) {

    this.saveMyData(); // Oh my...

  }

}

    
Battery Level: {battery ? battery : Not Supported}.

  } 

/>

```


## 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.

## Legal

Released under MIT license.