usePageTitle

Hook to modify the page title dynamically

Page Title Demo

Change the page title dynamically

New Page Title

Current document title: Not available on server

Installation

Props

Prop	Type	Default	Description
`options`	`PageTitleOptions`	`undefined`	Optional configurations for title

Options

Prop	Type	Default	Description
`suffix`	`string`	`""`	Suffix to be added to the title
`separator`	`string`	`" - "`	Separator between the title and suffix

Data

The hook returns an object with the following properties:

Property	Type	Description
`setTitle`	`(title: string) => void`	Sets the page title
`resetTitle`	`() => void`	Restores the original page title

Key Features & Details

Modifies the page title (document.title) dynamically
Support for adding suffix to the title (e.g., "Page - My Site")
Automatically restores the original title when the component is unmounted
Safe for SSR (Server-Side Rendering)

Browser Support

This hook works in all modern browsers that support JavaScript:

Chrome: Supported
Firefox: Supported
Safari: Supported
Edge: Supported
Opera: Supported

Performance Considerations

The hook uses useCallback to avoid unnecessary renders
The effect cleanup ensures the title is restored when the component is unmounted
Existence checks for the document object for SSR compatibility

Best Practices & Caveats

Always use the hook within client-side components
For Next.js applications, also consider using the <Head> component for SEO
Prefer short and descriptive titles for better user experience
Use the suffix to include the site or application name
Make sure to call resetTitle if you want to manually restore the title

Examples

Basic Usage

import { usePageTitle } from '@/hooks/use-page-title';
 
function MyComponent() {
  const { setTitle } = usePageTitle();
 
  return (
    <button onClick={() => setTitle('New Page Title')}>Change Title</button>
  );
}

With Suffix

import { usePageTitle } from '@/hooks/use-page-title';
 
function MyComponent() {
  const { setTitle } = usePageTitle({
    suffix: 'My Website',
    separator: ' - ',
  });
 
  // Will set the title to "Dashboard - My Website"
  return <button onClick={() => setTitle('Dashboard')}>Go to Dashboard</button>;
}

With Reset Functionality

import { usePageTitle } from '@/hooks/use-page-title';
 
function MyComponent() {
  const { setTitle, resetTitle } = usePageTitle();
 
  return (
    <div>
      <button onClick={() => setTitle('New Title')}>Change Title</button>
      <button onClick={resetTitle}>Reset Title</button>
    </div>
  );
}