Recommended way to set document.title? #49

sophiebits · 2014-06-25T18:05:11Z

Is there a recommended way to set document.title upon routing? I suppose one could just set it in all of the componentDidMount handlers, but it might be nice if there was a general strategy for this. (For example, maybe one page doesn't really care about title, in which case we'd want to fall back to the default.)

(Someone was also asking in IRC about this last night right after you left, @rpflorence.)

ryanflorence · 2014-06-25T21:57:01Z

componentDidMount seems good?

var Handler = React.createClass({
  componentDidMount: function() {
    document.title = "Amazing Page";
  }
});

Often it will probably depend on data you fetch though:

var Handler = React.createClass({
  componentDidMount: function() {
    someStore.fetchStuff(this.params.id, function(data) {
      this.setState({data: data});
      document.title = "Amazing Page | " + data.name;
    }.bind(this));
  }
});

Since I can't imagine all the scenarios that go into deciding what your page title is, and since you generally aren't serializing state to the <head> and <title> tags, I don't expect to have a conventional way to do this.

I think just doing document.title wherever you want is enough.

Eventually we will have a server-rendering story/example, so in that case you'd probably want a helper function that is a noop when on the server.

sophiebits · 2014-06-25T22:00:00Z

Eventually we will have a server-rendering story/example, so in that case you'd probably want a helper function that is a noop when on the server.

Ideally the server-rendered markup can have the right title too. :)

ryanflorence · 2014-06-25T22:26:15Z

I've messed with React.renderComponent(<App/>, document.documentElement)
and it almost works, I don't think you'll ever own anything higher than
body.

On Wed, Jun 25, 2014 at 4:00 PM, Ben Alpert notifications@github.com
wrote:

Eventually we will have a server-rendering story/example, so in that case
you'd probably want a helper function that is a noop when on the server.

Ideally the server-rendered markup can have the right title too. :)

—
Reply to this email directly or view it on GitHub
#49 (comment)
.

gaearon · 2014-10-08T15:14:49Z

I prefer the declarative way:

// there was some outdated code here, see below now

mjackson · 2014-10-08T15:37:44Z

@gaearon boom. that's the way to do it!

gaearon · 2014-10-08T21:01:54Z

@mjackson @rpflorence

I put it on NPM as react-document-title.
It really plays well with react-router's nesting:

var App = React.createClass({
  render: function () {
    // Use "My Web App" if no child overrides this
    return (
      <DocumentTitle title='My Web App'>
        <this.props.activeRouteHandler />
      </DocumentTitle>
    );
  }
});

var HomePage = React.createClass({
  render: function () {
    // Use "Home" while this component is mounted
    return (
      <DocumentTitle title='Home'>
        <h1>Home, sweet home.</h1>
      </DocumentTitle>
    );
  }
});

var NewArticlePage = React.createClass({
  mixins: [LinkStateMixin],

  render: function () {
    // Update using value from state while this component is mounted
    return (
      <DocumentTitle title={this.state.title || 'Untitled'}>
        <div>
          <h1>New Article</h1>
          <input valueLink={this.linkState('title')} />
        </div>
      </DocumentTitle>
    );
  }
});

gaearon · 2014-10-23T16:31:34Z

Thanks to @pluma, react-document-title now supports server-side usage via DocumentTitle.rewind() method. So, just like react-router, it can be used on both sides.

rajeshkw · 2017-02-26T06:13:04Z

class Layout extends React.Component {
  constructor(props){
    super(props);
    document.title = this.props.title;
  }
  render(){
    return(
      <div>
      </div>
    );
  }
}

then <Layout title="My Title"/> it works!

Aeonrush · 2017-02-26T15:08:27Z

Hi @rajeshkw
I found better solution, that works with fetching data and Redux

import React from 'react';

export default class Layout extends React.Component {
  constructor(props){
    super(props);
  }
  componentWillUpdate(nextProps) {
    document.title = nextProps.title;
  }
  render(){
    return null;
  }
}

marcogreselin · 2017-05-24T10:26:49Z

How do you do this in stateless functional components? I tried this but it doesn't work:
ComponentName.componentDidMount = () => document.title = "Who's Marco?"
Where the ComponentName is something like this:

export const Life = ({sayHello="Ciao"}) => (

)

tmkasun · 2017-05-30T10:13:00Z

@marcogreselin , As I know we can't create lifecycle hooks in a stateless functional component, These functional components don't have backing instances, and do not have the component lifecycle methods too. So better to convert it to stateful class style component.

mjoynes-wombat-web · 2017-09-08T02:16:10Z

@marcogreselin not sure if it's the right way but I believe you can do something like this.

export const Life = ({sayHello="Ciao"}) => {
  document.title='Your title.';
  return (
    <Your JSX>
  );
}

swapnil95 · 2017-09-24T14:46:24Z

Another alternative - https://github.com/kodyl/react-document-meta

ryanflorence closed this as completed Jun 25, 2014

ryanflorence added the question label Jun 25, 2014

pablocubico mentioned this issue Mar 15, 2016

Change Title from Coral Trust - (Beta) to Coral Playground coralproject/cay#134

Closed

binury mentioned this issue Sep 10, 2017

Pages should have titles binury/lexsury-client#1

Open

remix-run deleted a comment from divined Dec 1, 2017

remix-run deleted a comment from soumenpandit Dec 8, 2017

remix-run deleted a comment from DevJett Dec 29, 2017

remix-run locked as resolved and limited conversation to collaborators Dec 29, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Recommended way to set document.title? #49

Recommended way to set document.title? #49

sophiebits commented Jun 25, 2014

ryanflorence commented Jun 25, 2014

sophiebits commented Jun 25, 2014

ryanflorence commented Jun 25, 2014

gaearon commented Oct 8, 2014

mjackson commented Oct 8, 2014

gaearon commented Oct 8, 2014

gaearon commented Oct 23, 2014

rajeshkw commented Feb 26, 2017 •

edited

Aeonrush commented Feb 26, 2017

marcogreselin commented May 24, 2017 •

edited

tmkasun commented May 30, 2017

mjoynes-wombat-web commented Sep 8, 2017

swapnil95 commented Sep 24, 2017

Recommended way to set document.title? #49

Recommended way to set document.title? #49

Comments

sophiebits commented Jun 25, 2014

ryanflorence commented Jun 25, 2014

sophiebits commented Jun 25, 2014

ryanflorence commented Jun 25, 2014

gaearon commented Oct 8, 2014

mjackson commented Oct 8, 2014

gaearon commented Oct 8, 2014

gaearon commented Oct 23, 2014

rajeshkw commented Feb 26, 2017 • edited

Aeonrush commented Feb 26, 2017

marcogreselin commented May 24, 2017 • edited

tmkasun commented May 30, 2017

mjoynes-wombat-web commented Sep 8, 2017

swapnil95 commented Sep 24, 2017

rajeshkw commented Feb 26, 2017 •

edited

marcogreselin commented May 24, 2017 •

edited