usePageVisibility

The usePageVisibility hook allows you to detect when the page visibility changes, enabling you to execute a callback function based on whether the page is hidden or visible.

Add the utility

CLI

npx @ivnatsr/ezreact add use-page-visibility

Code

JavaScript

import { useEffect } from 'react'

export function usePageVisibility(callback) {
  useEffect(() => {
    const listener = () => {
      callback(document.hidden)
    }

    document.addEventListener('visibilitychange', listener)

    return () => {
      document.removeEventListener('visibilitychange', listener)
    }
  }, [callback])
}

TypeScript

import { useEffect } from 'react'

export function usePageVisibility(
  callback: (isPageHidden: boolean) => void | Promise<void>
) {
  useEffect(() => {
    const listener = () => {
      callback(document.hidden)
    }

    document.addEventListener('visibilitychange', listener)

    return () => {
      document.removeEventListener('visibilitychange', listener)
    }
  }, [callback])
}

Return

This hook returns void.

Parameters

• callback: A function that will be called with a boolean argument indicating whether the page is hidden or visible. This function can also return a promise.

Example

import { usePageVisibility } from './path/to/use-page-visibility'

const PageVisibilityExample = () => {
  const handleVisibilityChange = (isHidden) => {
    if (isHidden) {
      console.log('Page is hidden')
    } else {
      console.log('Page is visible')
    }
  }

  usePageVisibility(handleVisibilityChange)

  return <p>Check the console for visibility changes.</p>
}

export default PageVisibilityExample