Package Exports

@nikadev/use-battery-status
@nikadev/use-battery-status/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nikadev/use-battery-status) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm version

use-battery-status

A React hook for accessing battery status information using the Web Battery Status API.

Installation

npm install @nikadev/use-battery-status --save
# or
yarn add @nikadev/use-battery-status

Usage

import { useBatteryStatus } from '@nikadev/use-battery-status';

function App() {
  const { 
    isLoading,
    isSupported,
    level,
    charging,
    chargingTime,
    dischargingTime
  } = useBatteryStatus();

  if (!isSupported) {
    return <div>Battery API is not supported in your browser</div>;
  }

  if(isLoading) {
    return <div>Loading Battery data...</div>
  }

  return (
    <div>
      <p>Battery Level: {level * 100}%</p>
      <p>Charging: {charging ? 'Yes' : 'No'}</p>
      <p>Time until charged: {chargingTime} seconds</p>
      <p>Time until empty: {dischargingTime} seconds</p>
    </div>
  );
}

API

The useBatteryStatus hook returns an object with the following properties:

isLoading (boolean): Indicates if the Battery data is loaded
isSupported (boolean): Indicates if the Battery API is supported in the current browser
level (number): Current battery level between 0 and 1
charging (boolean): Whether the device is currently charging
chargingTime (number): Seconds remaining until battery is fully charged
dischargingTime (number): Seconds remaining until battery is empty

Browser Support

The Battery Status API is supported in most modern browsers. Check Can I Use for detailed browser support information.

Example

Check out the example directory in this repository for a complete working demo of the hook in action. To run the example:

# Clone the repository
git clone https://github.com/NikaDevMe/use-battery-status.git

# Navigate to example directory
cd use-battery-status/example

# Install dependencies
npm install

# Start the development server
npm run dev

Or check this Live Demo.

License

MIT