useBattery

https://github.com/streamich/react-use/blob/master/docs/useBattery.md

React sensor hook that tracks battery status.

💡 Implementation

Pretty

Copy

1
// utils
const on = (obj, ...args) => obj.addEventListener(...args);
const off = (obj, ...args) => obj.removeEventListener(...args);
const useBattery = () => {
  const [state, setState] = useState({});
  let mounted = true;
  let battery = null;
  const onChange = () => {
    const { charging, level, chargingTime, dischargingTime } = battery;
    setState({
      charging,
      level,
      chargingTime,
      dischargingTime
    });
  };
  const onBattery = () => {
    onChange();
    on(battery, "chargingchange", onChange);
    on(battery, "levelchange", onChange);
    on(battery, "chargingtimechange", onChange);
    on(battery, "dischargingtimechange", onChange);
  };
  useEffect(() => {
    navigator.getBattery().then(bat => {
      if (mounted) {
        battery = bat;
        onBattery();
      }
    });
    return () => {
      mounted = false;
      if (battery) {
        off(battery, "chargingchange", onChange);
        off(battery, "levelchange", onChange);
        off(battery, "chargingtimechange", onChange);
        off(battery, "dischargingtimechange", onChange);
      }
    };
  }, [0]);
  return state;
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

🚀 Usage

Pretty

Copy

1
function Demo() {
  const state = useBattery();
  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

⚡Preview

{
  "charging": true,
  "level": 1,
  "chargingTime": 0,
  "dischargingTime": null
}

🚨 console

💄 Improve this hook

Contributors

Raathigeshan