Change Page Title Dynamically in React

In this topic, we will discus how to handle the title inside the head section dynamically with the help of the document.title and React Helmet. We know that React is a single-page application so we face the challenge of dynamically controlling the title for individual components.

React provides the two best approaches to changing the dynamic title for every page on the tab change. One approach is document.title and the other is React Helmet. The React Helmet is a third-party library which imported from the "react-helmet" package when the page needs to change the title.

We utilize the document.title in the React Hooks to update quickly the page title in the application. We can assign a new value to the document.title to update the title on the page. The assigned value can be static or dynamic.

Syntax

useEffect(() => {
    document.title = 'My Webrecto'; // Quick solution
}, []);

import { Helmet } from 'react-helmet';
return (
    <>
      <Helmet>
        <title>{'My Webrecto'}</title>
      </Helmet>
    </>
  );

Both concepts are very easy and helpful for changing individual page titles in a single-page application.

Let's start to discuss both approaches with the example.

1) Using document.title in component

In the React application, the document.title is used in React Hooks. so I will create a small application with Router, and here we will create a useEffect hook for using the document.title for updating the title.

1.1) Create a function to change the title dynamically

We create a common function to handle the title change in the individual components with the help of the React hook.

The function name is DocumentTitle, and we use this function in every component. The function will call every time the component or page is rendered.

import { useRef, useEffect } from 'react'

function DocumentTitle(title) {

  useEffect(() => {
    document.title = title;
  }, [title]);
}
export default DocumentTitle

1.2) Create App component and Routes

Next, I created App.js component, In this component we configure Router for page navigation. Here we set three component names Dashboard, Employee, and Customer in the Route path. We use to Link for the navigation tab between pages.

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";
import Dashboard from "./Dashboard";
import Employee from "./Employee";
import Customer from "./Customer";
import About from "./About"; // here we are using Helmet for chage title

function App() {
  return (
    <div className="App">
      <h2>Change Page Title Dynamically in React::webrecto.com</h2>
      <Router>
        <div>
          <nav>
            <ul>
              <li><Link to="/">Dashboard</Link></li>
              <li><Link to="/employee">Employee</Link></li>
              <li><Link to="/customer">Customer</Link></li>
              <li><Link to="/about">About</Link></li>
            </ul>
          </nav>
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/employee" element={<Employee />} />
            <Route path="/customer" element={<Customer />} />
            <Route path="/about" element={<About />} /> 
          </Routes>
        </div>
      </Router>
    </div>
  );
}

export default App;

Now, when we navigate between pages, the titles will be changed from the DocumentTitle function file and update dynamically in the browser tab.

1.3) Use DocumentTitle function in component

We created 3 pages to change the dynamic title from the created function. All components will imported into the App page and bind with the Router to navigate between.

import React from 'react';
import DocumentTitle from '../DocumentTitle';

const Dashboard = () => {
  DocumentTitle("Dashboard") //This function will change the title and set the Dashboard name.
  return (
    <>
      <h3>Dashboard</h3>
    </>
  );
};
export default Dashboard;

import React from 'react';
import DocumentTitle from '../DocumentTitle';

const Employee = () => {
    DocumentTitle("Employee") //This function will change the title and set the Employee name.
  return (
    <>
      <h3>Employee List</h3>
    </>
  );
};
export default Employee;

import React from 'react';
import DocumentTitle from '../DocumentTitle';

const Customer = () => {
  DocumentTitle("Customer") //This function will change the title and set the Customer name.
  return (
    <>
      <h3>Customer List</h3>
    </>
  );
};
export default Customer;

• 1: In all components, we imported DocumentTitle function and it is taking one argument. We sent the new title name from the function to set the title. The function returns a new title after changing through document.title. When the page is rendered, the new title will be visible in the browser.
• 2: Overall in the example, we are using the react-router to handle dynamic title changes to multiple pages.

2) Using the React Helmet to change the title

The React Helmet is a third-party open-source React library, it is used in component labels and managed header section titles. It is used in the inside return() tag and is not used in the React hook.

import { Helmet } from 'react-helmet';
   <Helmet>
        <title>{"Title name"}</title>
   </Helmet>

We can change the title dynamically with the help of the Helmet component.

import React from 'react';
import { Helmet } from 'react-helmet';

const About = () => {
 const [title, setTitle] = useState("About us"); // here we can set dynamically title name
 return(
  <Helmet>
    <title>{title ? title : "No title"}</title>
  </Helmet>
 )
};
export default About;

Conclusion

In this tutorial, we can change the title in the page label from both concepts and both techniques are good for big and small react applications. It is very easy to learn and implement in code.

Find the print screen of the output.

Reference

Download Source Code