Как узнать состояние батареи устройства в React JS

В ReactJS вы можете получить состояние батареи устройства с помощью API состояния батареи, который предоставляет информацию об уровне заряда батареи устройства и состоянии зарядки, но иногда это вызывает проблему, поскольку многие браузеры не поддерживают это и выдает ошибку, поэтому Чтобы упростить задачу, мы воспользуемся хуком из пакета React-use , чтобы получить статус батареи устройства.

React-use — популярная библиотека, содержащая многоразовые хуки для ReactJS. Перехват useBattery — один из самых полезных перехватчиков в этой библиотеке, поскольку он позволяет вам легко получить состояние батареи устройства, на котором работает ваше приложение. В этом уроке мы рассмотрим, как использовать хук useBattery в ReactJS.

Требования

• react-use

Шаг 1. Установите React и используйте

Прежде чем мы начнем использовать хук useBattery, мы должны сначала установить пакет React-use. Для этого откройте терминал и перейдите в корневой каталог приложения ReactJS. Затем выполните следующую команду.

yarn add react-use

Шаг 2. Импортируйте хук useBattery.

Чтобы использовать хук useBattery, нам нужно импортировать его из библиотеки реагирования. Вот пример

import { useBattery } from 'react-use'

Шаг 3. Используйте хук useBattery.

После импорта перехватчика useBattery мы можем использовать его внутри функционального компонента. Перехват useBattery возвращает объект, который содержит несколько свойств, включая уровень заряда батареи, состояние зарядки, время зарядки и время разрядки. Вот пример использования перехватчика useBattery.

import { useBattery } from 'react-use'


function App() {
  // Вызов хука useBattery 
  const battery=useBattery()

    // Деструктуризация свойств батареи 
  const {isSupported,level, charging, dischargingTime, chargingTime}=battery;

   //Проверяем, поддерживает ли браузер API батареи 
  if(!isSupported){
    return(
      <div>
        <strong>Датчик батареи</strong>: <span>Не поддерживается</span> 
      </div>
    )
  }
  return (
    <div>
       {/* Отобразить процент заряда батареи */} 
      <strong>Уровень заряда -</strong>
      <span>{(level*100).toFixed(0)} %</span><br/>
      {/* Отображение того, заряжается ли устройство */ }
      <strong>Зарядка</strong>:  {" "} 
      <span>{charging ? "Да" : "Нет "}</span> <br /> 
       {/* Время зарядки устройства отображения */} 
      <strong>Время зарядки</strong>:   
      <span>{chargingTime ? chargingTime : "Finished"}</span> <br />
       {/* Время разрядки устройства отображения */} 
      <strong>Время разрядки</strong>:&nbsp;&nbsp;{" "}
      <span>{dischargingTime}</span>
    </div>
  )
}

export default App

По любому вопросу вы можете связаться со мной через LinkedIn.

Ниже вы можете найти образец репозитория GitHub и демо-версию на codeandbox.

GitHub - Omurbek1/check_device_battery_react