How to Add a Dynamic Page Title in React Without Package

1 year ago admin Reactjs

In this lesson, we are going to see how to add a dynamic page title in react js, we will use a custom hook to do that without using any packages.


Create a custom hook

First, let's create a custom hook that we will use to update the page title dynamically the file name is "useTitle".

                                                        
                                                                                                                        
import { useEffect } from 'react';

export default function useTitle(title) {
    
    useEffect(() => {
        document.title = `React Shopping Cart - ${title}`
    }, [title]);

    return null;
}


Update the page title dynamically

Now inside your components, you can use the custom hook to change the page title dynamically.

Demo

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


export default function Home() {
  useTitle('Home');
  return (
    <>
       Home Page
    </>
  );
}

Related Tuorials

How to Use Rich Text Editor in React js

In this lesson, we will see how to use rich text editor in React JS, let's assume that we have a com...


How to Download a File from the Server Using Laravel and React js

In this tutorial, we will see how to download a file from the server using Laravel and React js, let...


How to Add a Class on Hover in React js

In this lesson, we will see how to add a class on hover in React js, let's assume that we have a boo...


Drag and Drop Image and File Upload Using React and Laravel

In this tutorial, we will see how to upload files using drag and drop in React js and Laravel, first...


API Authentication Using Laravel Sanctum and React js Part 3

In the third part of this tutorial, we will register and log in the user, get the access token, and...


API Authentication Using Laravel Sanctum and React js Part 2

In the second part of this tutorial, we will start handling the frontend first, we will create the r...


API Authentication Using Laravel Sanctum and React js Part 1

In today's tutorial, we are going to see how to create a token-based authentication system using Lar...


How to Update Nested Array with Hooks in React

In this lesson, we will see how to update nested array with hooks in React, let's assume that we hav...


How to Set the Loading State Only on a Specific Clicked Button in React

In this lesson, we will see how to set the loading state only on a specific clicked button in React,...


Create a Rest API in PHP and Consume it in React Part 5

In the fifth part of this tutorial, we will add routes to our application and finally, we will add s...