usePageVisibility

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

```tsx
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" />;
}