Mantine UIFAQColors generator

use-document-visibility

Detects if the current tab is active

Source

View source code

Docs

Edit this page

PackageIcon

@mantine/hooks

Usage

The use-document-visibility hook returns the current document.visibilityState – it allows you to detect 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

// DocumentVisibilityState is 'visible' | 'hidden'
function useDocumentVisibility(): DocumentVisibilityState;

use-document-title

use-eye-dropper