Detectando status de la red con react hook

Hola amigos de la #nerdytud

Quiero compartirles un método sencillo para detectar el status de la red, por medio de la creación de un hook.

Crear aplicación

npx create-react-app react-status

cd react-status

Crear hook

import { useEffect, useState } from 'react';

const useOnline = () => {
  const [status, setStatus] = useState(false);

  const checkStatus = () => {
    setStatus(navigator.onLine);
  };

  useEffect(() => {
    checkStatus();
  }, []);

  window.addEventListener('offline', (event) => {
    setStatus(false);
  });

  window.addEventListener('online', (event) => {
    setStatus(true);
  });

  return status;
}

export default useOnline;

Modificar App.js

import useOnline from './hooks/useOnline';

const App = () => {

  const online = useOnline();

  return (<div>{online ? 'online' : 'offline'}</div>);
}

export default App;

Ejecutar la aplicación

npm start

http://localhost:3000