Hook to check page visibility

[matheusvellone]

Create a new hook which relies on document.hidden. It provides a cool API to check if the page is currently visible. It works with multiple monitors also.

const pageVisible = usePageVisibility()

Refs:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/hidden
• https://caniuse.com/?search=document.hidden
• https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event

[matheusvellone]

Implemented this hook on my app, but it would be cool to have this on Mantine too 😄

import { useEffect, useState } from "react"

export default () => {
  const [isVisible, setIsVisible] = useState(!document.hidden)

  const updateVisibility = () => setIsVisible(!document.hidden)

  useEffect(() => {
    document.addEventListener('visibilitychange', updateVisibility, false)

    return () => document.removeEventListener('visibilitychange', updateVisibility)
  })

  return isVisible
}

[rtivital]

We've already added this hook, it will be available in 4.3 release