DEV Community

LuisPa
LuisPa

Posted on

How to add a dynamic title on your React app

In this post, I'll show you how to create a simple component to add a dynamic title behavior on your web app.

Here you have a repo with an applicable example: GitHub Repo

Resume

  1. Add the react-helmet dependency.
  2. Write the dynamic component for the title.
  3. Add the dynamic component to your router or your pages.

Add the react-helmet dependency.

If you're using yarn

$ yarn add react-helmet

If you're using npm

$ npm i react-helmet

Write the dynamic component for the title.

You can write an independent component for this example, like this:

// TitleComponent.jsx

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

const TitleComponent = ({ title }) => {
    var defaultTitle = '⚛️ app';
    return (
        <Helmet>
            <title>{title ? title : defaultTitle}</title>
        </Helmet>
    );
};

export { TitleComponent };

In this example, we just wrote an independent component that could receive a title and, if you don't send a prop as title, the title will be the default title.

Add the dynamic component to your routes.

We have multiple approaches to add this component to your app, it depends mostly on your decisions on routing (if you're using Gatsby or Next.js you can ovoid configure a router, but if you're using create-react-app or a react boiler template you can add this to your router.

Adding this component to your routes (Using router):


// routes.js

import React from 'react';
import { Route } from 'react-router';
import { TitleComponent } from './TitleComponent.jsx';

// withTitle function
const withTitle = ({ component: Component, title }) => {
    return class Title extends Component {
        render() {
            return (
                <React.Fragment>
                    <TitleComponent title={title} />
                    <Component {...this.props} />
                </React.Fragment>
            );
        }
    };
};

// Example pages 
const Index = () => <h1>This is the IndexComponent!</h1>;
const Persons = () => <h1>This is the PersonsComponent!</h1>;
const Dogs = () => <h1>This is the DogsComponent!</h1>;
const Food = () => <h1>This is the FoodComponent!</h1>;

// Adding title
const IndexComponent = withTitle({ component: Index, title: 'Index' });
const PersonsComponent = withTitle({ component: Persons, title: '🧠 Persons' });
const DogsComponent = withTitle({ component: Dogs, title: '🐶 Dogs' });
const FoodComponent = withTitle({ component: Food, title: '🌮 Food' });

// Your router
export default (
    <Route>
        <Route path="/" component={IndexComponent} />
        <Route path="/persons" component={PersonsComponent} />
        <Route path="/dogs" component={DogsComponent} />
        <Route path="/food" component={FoodComponent} />
    </Route>
);

Adding this component to your pages (Using Next.js, Gatsby, After.js):

Using withTitle function:

// pages/pageOne.jsx

import React from 'react';
import { TitleComponent } from './TitleComponent.jsx';

// withTitle function
const withTitle = ({ component: Component, title }) => {
    return class Title extends Component {
        render() {
            return (
                <React.Fragment>
                    <TitleComponent title={title} />
                    <Component {...this.props} />
                </React.Fragment>
            );
        }
    };
};

const PageOne = () => (
    <React.Fragment>
        <h1> Page 1 </h1>
        // Some content...
    </React.Fragment>
);

export default withTitle({ component: PageOne, title: 'Page One!' });

Adding directly the <TitleComponent /> to your page:

// pages/pageOne.jsx

import React from 'react';
import { TitleComponent } from './TitleComponent.jsx';

const PageOne = () => (
    <React.Fragment>
        <TitleComponent title="Page One!" />
        <h1> Page 1 </h1>
        // Some content...
    </React.Fragment>
);

export default PageOne;

Here you have a repo with an applicable example: GitHub Repo

And that's it. Thanks for reading and happy coding!

Top comments (14)

Collapse
 
antibland profile image
Andy Hoffman

For those using React Hooks, here is the withTitle function:

const withTitle = ({ ChildComponent, title }) => (props) => (
  <>
    <TitleComponent title={title} />
    <ChildComponent {...props} />
  </>
);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
alfredosalzillo profile image
Alfredo Salzillo • Edited
// routes.js

import React from 'react';
import { Route } from 'react-router';
import { TitleComponent } from './TitleComponent.jsx';

// withTitle function
const withTitle = ({ component: Component, title }) => {
    return class Title extends Component {
        render() {
            return (
                <React.Fragment>
                    <HelmetComponent title={title} />
                    <Component {...this.props} />
                </React.Fragment>
            );
        }
    };
};

I think you have mistakenly used HelmetComponent instead of TitleComponent.

Collapse
 
luispa profile image
LuisPa

Great observation, fixed!

Collapse
 
rob88 profile image
Reben Faraj • Edited

if you are struggling with integrating helmet title to your project , run this command npm i helmet
once installed

simply copy and paste into a new file called TitleComponent.js in the src folder

// TitleComponent.js
import React from 'react';
import Helmet from 'react-helmet';

const TitleComponent = ({ title }) => {
var defaultTitle = '⚛️ app';
return (

{title ? title : defaultTitle}

);
};

export { TitleComponent };

and in your app.js inside return(
//paste this !!

)
// lets assume that you have a contact page

import {TitleComponent } from './TitleComponent';
paste this into contact page inside a dev
tag

Its really confused me from the beginning, let me know if you need any help with this

Happy Codding :)

Collapse
 
dance2die profile image
Sung M. Kim • Edited

Thanks LuisPa for the post.

May I ask how HelmetComponent is implemented? I can't seem to find the source in the article 🙏

Collapse
 
luispa profile image
LuisPa

Sure man! Here you have a repo with an aplicable example: GitHub Repo

Collapse
 
dance2die profile image
Sung M. Kim

✨🌠💫🌟⭐

Collapse
 
sistemassouza profile image
Denis Souza • Edited

I have is problem

TypeError: Cannot call a class as a function

my code

thepracticaldev.s3.amazonaws.com/i...

Collapse
 
luispa profile image
LuisPa • Edited

Hi! Please put here the code from the withTitle() method, please.

You can see the example repo:

github.com/LuisPaGarcia/react-dyna...

Collapse
 
sistemassouza profile image
Denis Souza • Edited

Here my code

thepracticaldev.s3.amazonaws.com/i...

I did find problem

I only did change extends Component to extens React.Component at the TitleComponent

thanks

Thread Thread
 
luispa profile image
LuisPa

Great!

Collapse
 
sereiodobrejo profile image
Sereio-do-Brejo

Amazing!!! It also helps to improves SEO!
Thank you for the post.

Collapse
 
christanfoden profile image
Christan Foden • Edited

Could you do the same with the favicon?

Collapse
 
luispa profile image
LuisPa

Sure!