Set document.title to given string


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 string that should be set as document title inside any component. Hook is triggered every time value changes and value is not empty string (trailing whitespace is trimmed) or null.

import { useState } from 'react';
import { useDocumentTitle, randomId } from '@mantine/hooks';
import { Button } from '@mantine/core';
export function Demo() {
const [title, setTitle] = useState('');
return (
<Button onClick={() => setTitle(randomId())}>
Set document title to random id
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback