use-document-visibility

Detects if current tab is active

Import

Usage

use-document-visibility hook returns current document.visibilityState – it allows detecting if the current tab is active:

Switch to another tab to see document title change

import { Text } from '@mantine/core';
import { useDocumentTitle, useDocumentVisibility } from '@mantine/hooks';

function Demo() {
  const documentState = useDocumentVisibility();
  useDocumentTitle(`Document is ${documentState}`);
  return <Text>Switch to another tab to see document title change</Text>;
}

Definition

function useDocumentVisibility(): 'visible' | 'hidden';