usePageTitle Hook to modify the page title dynamically
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
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 >
);
}