packages/components/hooks/useOnline.ts

   1 import { useEffect, useState } from 'react';
   2
   3 export const getOnlineStatus = () => {
   4     return typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
   5 };
   6
   7 const useOnline = () => {
   8     const [onlineStatus, setOnlineStatus] = useState(getOnlineStatus());
   9
  10     useEffect(() => {
  11         const handleOnlineStatus = () => {
  12             setOnlineStatus(getOnlineStatus());
  13         };
  14         handleOnlineStatus();
  15         window.addEventListener('online', handleOnlineStatus);
  16         window.addEventListener('offline', handleOnlineStatus);
  17         return () => {
  18             window.removeEventListener('online', handleOnlineStatus);
  19             window.removeEventListener('offline', handleOnlineStatus);
  20         };
  21     }, []);
  22
  23     return onlineStatus;
  24 };
  25
  26 export default useOnline;