Implement custom useOnlineStatus() Hook in React

There are several applications, like social networks, where there are requirements to know the online and offline status of the users. This logic can be separated out in the custom hook so that it can be quickly used anywhere in the code.

In this blog post, we will explore how to create a custom useOnlineStatus() hook in React to monitor the online status of a device. This hook will be useful for applications that need to perform actions based on the device's online/offline status.

Code Implementation - useOnlineStatus Hook

Let's start by creating the custom useOnlineStatus() hook. This hook will utilize the navigator.onLine property to determine the online status of the device.

    import React, { useState, useEffect } from 'react';

    const useOnlineStatus = () => {
        const [isOnline, setIsOnline] = useState(navigator.onLine);

        useEffect(() => {
            const handleOnline = () => setIsOnline(true);
            const handleOffline = () => setIsOnline(false);

            window.addEventListener('online', handleOnline);
            window.addEventListener('offline', handleOffline);

            return () => {
                window.removeEventListener('online', handleOnline);
                window.removeEventListener('offline', handleOffline);
            };
        }, []);

        return isOnline;
    };

    export default useOnlineStatus;
    

In the code snippet above, we define the useOnlineStatus() hook that initializes the online status based on the initial value of navigator.onLine. We then add event listeners for the online and offline events to update the online status state accordingly.

Usage

Now that we have our custom hook, let's see how we can use it in a React component.

    import React from 'react';
    import useOnlineStatus from './useOnlineStatus';

    const OnlineStatusComponent = () => {
        const isOnline = useOnlineStatus();

        return (
            <div>
                <p>Online Status: {isOnline ? 'Online' : 'Offline'}</p>
            </div>
        );
    };

    export default OnlineStatusComponent;
    

By invoking the useOnlineStatus() hook in a component, we can access the current online status of the device and render different content based on it.