use-page-title

A lightweight React hook to dynamically set the page title for each page or component.

Installation

Install use-page-title from npm:

npm install use-page-title

Usage

Import the usePageTitle hook and use it in any component to change the document title when the component mounts.

import React from 'react';
import { usePageTitle } from 'use-page-title';

function HomePage() {
  // Set the page title for this component
  usePageTitle('Home - My Site');

  return <div>Welcome to the Home Page</div>;
}

export default HomePage;

In the example above, when the HomePage component is mounted, the browser’s title bar will display "Home - My Site". The title will revert to its original value when the component unmounts.

API

usePageTitle(title)

• title (string): The title to set for the document. Accepts a dynamic string to update the title as needed.

Example

import React from 'react';
import { usePageTitle } from 'use-page-title';

function AboutPage() {
  usePageTitle('About Us - My Site');

  return <div>Learn more about us on this page.</div>;
}

function ContactPage() {
  usePageTitle('Contact - My Site');

  return <div>Get in touch with us!</div>;
}

Each page can have its own title by calling usePageTitle with a different title string.

Installation Details

This package requires React 16.8 or higher as it uses React Hooks.

Enjoy! coding 🎉