useDocumentTitle

useDocumentTitle.tsx

useDocumentTitle

// Easily update page title dynamically

Quick Usage

const { setTitle, restoreTitle } = useDocumentTitle('My App');

Features

Dynamic Title

Template Support

Prefix/Suffix

Auto Restore

When to Use

Perfect for SEO optimization, user notifications, progress indicators, or any dynamic page title management.

Interactive Example

Current Title:

Title:

Template:

Prefix:

Suffix:

Pro tip:

Look at your browser tab to see the title changes! Perfect for notifications, progress indicators, or SEO optimization.

Complete Example

import { useDocumentTitle } from '@usegrand/react-hokss';

function NotificationApp() {
  const { setTitle, setTitleWithTemplate, addPrefix, restoreTitle } = useDocumentTitle(
    'My App',
    { 
      template: '{title} - My Company',
      restoreOnUnmount: true 
    }
  );

  const showNotification = () => {
    setTitle('🔔 New Message!');
    setTimeout(() => {
      setTitle('My App');
    }, 3000);
  };

  const showProgress = (progress: number) => {
    setTitleWithTemplate(`Loading... ${progress}%`);
  };

  return (
    <div>
      <button onClick={showNotification}>
        Show Notification
      </button>
      <button onClick={() => showProgress(75)}>
        Show Progress
      </button>
      <button onClick={restoreTitle}>
        Restore Title
      </button>
    </div>
  );
}

API Reference

Parameters

initialTitlestring

Initial title to set (optional)

optionsDocumentTitleOptions

Configuration options for title management

options.restoreOnUnmountboolean

Whether to restore original title on unmount (default: true)

options.templatestring

Template string with {title} placeholder

options.prefixstring

Prefix to add before the title

options.suffixstring

Suffix to add after the title

Returns

DocumentTitleResult

Object containing title control functions

setTitle

Function to set the document title

getTitle

Function to get the current document title

restoreTitle

Function to restore the original title

addPrefix

Function to add a prefix to the current title

addSuffix

Function to add a suffix to the current title

setTitleWithTemplate

Function to set title using template

useFavicon

All Hooks

useScrollPosition