import { useEffect, useState } from 'react'
        
      const VISIBILITY_STATE_SUPPORTED = 'visibilityState' in document
        
      function isWindowVisible() {
        if (!VISIBILITY_STATE_SUPPORTED) {
          return true
        }
        
        return document.visibilityState === 'visible'
      }
        
      /**
        * Returns whether the window is currently visible to the user.
        */
      export default function useIsWindowVisible() {
        const [isVisible, setIsVisible] = useState(isWindowVisible())
        
        useEffect(() => {
          if (!VISIBILITY_STATE_SUPPORTED) return undefined
        
          const handleVisibilityChange = () => {
            setIsVisible(isWindowVisible())
          }
        
          document.addEventListener('visibilitychange', handleVisibilityChange)
          return () => {
            document.removeEventListener('visibilitychange', handleVisibilityChange)
          }
        }, [setIsVisible])
        
        return isVisible
      }

      Javascript language logo
      your recipe card header background
      Custom Windowhook

      Components

      The code in useIsWindowVisible() checks to see if VISIBILITY_STATE_SUPPORTED is set in the current document. If it is not set, then the function returns true. Otherwise, it returns the current visibility state of the window, which is either "visible" or "hidden".

      Shortcut: customWindow.Hook

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.