use-document-title

Usage

use-document-title sets document.title property with React.useLayoutEffect hook. Hook is not called during server side rendering. Use this hook with client only applications, for isomorphic use more advanced options, for example, react-helmet.

Call hook with a string that should be set as document title inside any component. The hook is triggered every time value changes and the value is not an empty string (trailing whitespace is trimmed) or null.

import { useState } from 'react';
import { useDocumentTitle, randomId } from '@mantine/hooks';
import { Button } from '@mantine/core';

function Demo() {
  const [title, setTitle] = useState('');
  useDocumentTitle(title);

  return (
    <Button onClick={() => setTitle(randomId())}>
      Set document title to random id
    </Button>
  );
}

Definition

function useDocumentTitle(title: string): void;