usePageVisibility

usePageVisibility is a React hook that detects page visibility changes. It monitors when the user switches tabs or minimizes the browser using the Page Visibility API. Useful for pausing/resuming animations, videos, or background tasks.

SSR Behavior: Returns { isVisible: true, visibilityState: 'visible' } during server-side rendering.

Interface

function usePageVisibility(): PageVisibility;

Parameters

Return Value

• PageVisibility
  

  visibility information

  • isVisible
    

    True if page is currently visible to the user - visibilityState - Current visibility state
    : 'visible' | 'hidden'.

Example

function VideoPlayer() {
  const { isVisible } = usePageVisibility();
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (!videoRef.current) return;

    // Pause video when tab is hidden
    if (!isVisible) {
      videoRef.current.pause();
    }
  }, [isVisible]);

  return <video ref={videoRef} src="video.mp4" />;
}

function Analytics() {
  const { isVisible, visibilityState } = usePageVisibility();

  useEffect(() => {
    if (visibilityState === 'hidden') {
      // Track when user leaves the page
      analytics.track('page_hidden');
    }
  }, [visibilityState]);

  return null;
}