useOnlineStatus Hook
A custom React Hook to detect network online/offline status with TypeScript support
Code
import { useState, useEffect } from 'react';
function useOnlineStatus(): boolean {
const [isOnline, setIsOnline] = useState(() => {
__TOKEN_21__ (typeof window === 'undefined') return true;
return window.navigator.onLine;
});
useEffect(() => {
__TOKEN_25__ (typeof window === 'undefined') return;
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
__TOKEN_30__ () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
return isOnline;
}
// Usage example
// const isOnline = useOnlineStatus();
// <div className={isOnline ? 'online' : 'offline'}>
// {isOnline ? 'Connected' : 'No internet connection'}
// </div>
// useEffect(() => {
// if (!isOnline) {
// // Show offline notification
// }
// }, [isOnline]);