How to create a custom hook for handling online or offline status in Next.js



Image not found!!

Creating a custom hook for handling online/offline status in a Next.js application involves using the useEffect hook to add event listeners for online and offline events, and then updating the state accordingly. Here's a simple example:

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

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

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
    };

    const handleOffline = () => {
      setIsOnline(false);
    };

    // Set up event listeners for online and offline events
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // Clean up event listeners on component unmount
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []); // Empty dependency array ensures that the effect runs only once during component mount

  return isOnline;
};

export default useOnlineStatus;

In this example:

  1. The useOnlineStatus hook initializes the state (isOnline) with the current online status using navigator.onLine.
  2. The useEffect hook is used to set up event listeners for the online and offline events on the window object.
  3. When the online event occurs, the handleOnline function is called, updating the state to true.
  4. When the offline event occurs, the handleOffline function is called, updating the state to false.
  5. To avoid memory leaks, the hook removes the event listeners when the component unmounts.

You can use this custom hook in your Next.js components like this:

jsx
import React from 'react';
import useOnlineStatus from '../path-to-useOnlineStatus';

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

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

export default MyComponent;

Now, isOnline will hold the current online/offline status, and your component will re-render whenever the online/offline status changes.

Category List