-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Recommended way to set document.title? #49
Comments
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 I think just doing 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. :) |
I've messed with On Wed, Jun 25, 2014 at 4:00 PM, Ben Alpert notifications@github.com
|
I prefer the declarative way: // there was some outdated code here, see below now |
@gaearon boom. that's the way to do it! |
I put it on NPM as react-document-title. 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>
);
}
}); |
Thanks to @pluma, react-document-title now supports server-side usage via |
then |
Hi @rajeshkw import React from 'react';
export default class Layout extends React.Component {
constructor(props){
super(props);
}
componentWillUpdate(nextProps) {
document.title = nextProps.title;
}
render(){
return null;
}
} |
How do you do this in stateless functional components? I tried this but it doesn't work:
|
@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. |
@marcogreselin not sure if it's the right way but I believe you can do something like this.
|
Another alternative - https://github.com/kodyl/react-document-meta |
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.)
The text was updated successfully, but these errors were encountered: