How to create a custom hook for handling document visibility in Next.js

In Next.js, you can create a custom hook for handling document visibility by utilizing the useEffect hook provided by React. This custom hook will leverage the document object to detect changes in the visibility state of the document. Here's how you can create such a hook:

jsxCopy code
import { useEffect, useState } from 'react';

export const useDocumentVisibility = () => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsVisible(!document.hidden);
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return isVisible;
};

In this custom hook:

• We use the useState hook to maintain the state of document visibility (isVisible).
• Inside the useEffect hook, we add an event listener for the 'visibilitychange' event on the document object.
• When the visibility changes, the handleVisibilityChange function is called, which updates the isVisible state based on the document.hidden property.
• We return the isVisible state from the hook.

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

jsxCopy code
import { useDocumentVisibility } from '../hooks/useDocumentVisibility';

const MyComponent = () => {
  const isVisible = useDocumentVisibility();

  return (
    <div>
      Document is {isVisible ? 'visible' : 'hidden'}
    </div>
  );
};

export default MyComponent;

Now, isVisible will reflect the current visibility state of the document within your Next.js component.