How do you set the document title in React

Question

I would like to set the document title  in the browser title bar  for my React application  I have tried using react-document-title  seems out of date  and setting document title in the constructor and componentDidMount   - none of these solutions work

User · Answer

Simply you can create a function in a js file and export it for usages in components

like below:

export default function setTitle(title) {
  if (typeof title !== "string") {
     throw new Error("Title should be an string");
  }
  document.title = title;
}

and use it in any component like this:

import React, { Component } from 'react';
import setTitle from './setTitle.js' // no need to js extension at the end

class App extends Component {
  componentDidMount() {
    setTitle("i am a new title");
  }

  render() {
    return (
      <div>
        see the title
      </div>
    );
  }
}

export default App

User · Answer

Since React 16 8  you can build a custom hook to do so  similar to the solution of  Shortchange   export function useTitle title      useEffect      gt        const prevTitle   document title     document title   title     return      gt          document title   prevTitle               this can be used in any react component  e g   const MyComponent        gt      useTitle  quot New Title quot     return        lt div gt                lt  div gt         It will update the title as soon as the component mounts and reverts it to the previous title when it unmounts

User · Answer

you should set document title in the life cycle of  componentWillMount    componentWillMount         document title    your title name

User · Answer

You can use the following below with document title    Home Page   import React from  react  import   Component   from  react-dom    class App extends Component    componentDidMount        document title    Home Page         render        return         lt p gt  Title is now equal to Home Page  lt  p gt               ReactDOM render     lt App   gt     document getElementById  root        or You can use this npm package npm i react-document-title  import React from  react  import   Component   from  react-dom  import DocumentTitle from  react-document-title     class App extends Component      render        return         lt DocumentTitle title  Home  gt           lt h1 gt Home  sweet home  lt  h1 gt         lt  DocumentTitle gt               ReactDOM render     lt App   gt     document getElementById  root        Happy Coding

User · Answer

You can use ReactDOM and altering  lt title gt  tag  ReactDOM render      New Title      document getElementsByTagName  title   0

User · Answer

For React 16 8  you can do this with a functional component using useEffect   For Example    useEffect      gt       document title    new title            Having the second argument as an array calls useEffect only once  making it similar to componentDidMount

User · Answer

As others have mentioned  you can use document title    My new title  and React Helmet to update the page title   Both of these solutions will still render the initial  React App  title before scripts are loaded   If you are using create-react-app the initial document title is set in the  lt title gt  tag  public index html file   You can edit this directly or use a placeholder which will be filled from environmental variables     env   REACT APP SITE TITLE  My Title   SOME OTHER VARS       If for some reason I wanted a different title in my development environment -    env development   REACT APP SITE TITLE    DEVELOPMENT   My TITLE    DEVELOPMENT    SOME OTHER VARS        public index html    lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt                         lt title gt  REACT APP SITE TITLE  lt  title gt                     lt  head gt        lt body gt                     lt  body gt   lt  html gt    This approach also means that I can read the site title environmental variable from my application using the global process env object  which is nice   console log process env REACT APP SITE TITLE URL      My Title    See  Adding Custom Environment Variables

User · Answer

I use this method  which I found out since it s easier for me  I use it in combination with function component  Only do this  if you don t care that it won t display any title if the user disables Javascript on your page   There are two things you need to do   1 Go into your index html and delete this line here   lt title gt React App lt  title gt    2 Go into your mainapp function and return this which is just a normal html structure  you can copy and paste your main content from your website in between the body tags    return            lt html gt             lt head gt               lt title gt hi lt  title gt             lt  head gt             lt body gt  lt  body gt           lt  html gt             You can replace the title as you wish

User · Answer

const setTitle    title    gt      const prevTitle   document title    document title   title    return      gt  document title   prevTitle     const MyComponent        gt      useEffect      gt  setTitle  Title while MyComponent is mounted            return  lt div gt My Component lt  div gt      This is a pretty straight forward solution I threw together while working today  setTitle returns a function that resets the title to what it was prior to using setTitle  it works wonderfully inside of React s useEffect hook

User · Answer

You can use React Helmet   import React from  react  import   Helmet   from  react-helmet   const TITLE    My Page Title   class MyComponent extends React PureComponent     render          return          lt  gt           lt Helmet gt             lt title gt   TITLE   lt  title gt           lt  Helmet gt                     lt   gt

User · Answer

If you re a beginner you can just save yourself from all that by going to the public folder of your react project folder and edit the title in  index html  and put yours  Don t forget to save so it will reflect

User · Answer

React Portals can let you render to elements outside the root React node  such at  lt title gt    as if they were actual React nodes  So now you can set the title cleanly and without any additional dependencies   Here s an example   import React    Component   from  react   import ReactDOM from  react-dom    class Title extends Component       constructor props            super props           this titleEl   document getElementsByTagName  title   0              render             let fullTitle          if this props pageTitle                fullTitle   this props pageTitle     -     this props siteTitle            else               fullTitle   this props siteTitle                     return ReactDOM createPortal              fullTitle                    this titleEl                    Title defaultProps         pageTitle  null      siteTitle   Your Site Name Here       export default Title    Just put the component in the page and set pageTitle    lt Title pageTitle  Dashboard    gt   lt Title pageTitle  item name    gt

User · Answer

I haven t tested this too thoroughly  but this seems to work  Written in TypeScript   interface Props       children  string number Array lt string number gt      export default class DocumentTitle extends React Component lt Props gt         private oldTitle  string   document title       componentWillUnmount    void           document title   this oldTitle             render             document title   Array isArray this props children    this props children join       this props children          return null            Usage   export default class App extends React Component lt Props  State gt         render             return  lt  gt               lt DocumentTitle gt  this state files length  Gallery lt  DocumentTitle gt               lt Container gt                  Lorem ipsum              lt  Container gt           lt   gt            Not sure why others are keen on putting their entire app inside their  lt Title gt  component  that seems weird to me   By updating the document title inside render   it ll refresh stay up to date if you want a dynamic title  It should revert the title when unmounted too  Portals are cute  but seem unnecessary  we don t really need to manipulate any DOM nodes here

User · Answer

the easiest way is to use react-document-configuration npm install react-document-configuration --save Example  import React from  quot react quot   import Head from  quot react-document-configuration quot    export default function Application         return            lt div gt               lt Head title  quot HOME quot  icon  quot link of icon quot    gt               lt div gt                   lt h4 gt Hello Developers  lt  h4 gt               lt  div gt           lt  div gt

User · Answer

import React from  react  import ReactDOM from  react-dom    class Doc extends React Component    componentDidMount        document title    dfsdfsdfsd         render        return         lt b gt  test  lt  b gt               ReactDOM render     lt Doc   gt     document getElementById  container        This works for me   Edit  If you re using webpack-dev-server set inline to true

User · Answer

In React 16 13  you can set it directly inside the render function   import React from  react   import ReactDOM from  react-dom    class App extends React Component       render             document title    wow          return  lt p gt Hello lt  p gt           ReactDOM render       lt App   gt       document getElementById  root       For function component   function App         document title    wow      return  lt p gt Hello lt  p gt

[javascript] How do you set the document title in React?

Examples related to javascript

Examples related to reactjs

Examples related to dom