Provides a declarative way to specify document.title in a single-page app.
This component can be used on server side as well.
Built with React Side Effect.
npm install --save react-document-title
Dependencies: React >= 0.13.0
- Does not emit DOM, not even a
<noscript>; - Like a normal React compoment, can use its parent's
propsandstate; - Can be defined in many places throughout the application;
- Supports arbitrary levels of nesting, so you can define app-wide and page-specific titles;
- Works just as well with isomorphic apps.
Assuming you use something like react-router:
function App() {
// Use "My Web App" if no child overrides this
return (
<DocumentTitle title='My Web App'>
<SomeRouter />
</DocumentTitle>
);
}
function HomePage() {
// Use "Home" while this component is mounted
return (
<DocumentTitle title='Home'>
<h1>Home, sweet home.</h1>
</DocumentTitle>
);
}
class NewArticlePage extends React.Component {
constructor(props) {
super(props);
this.state = { title: 'Untitled' };
}
render() {
// Update using value from state while this component is mounted
return (
<DocumentTitle title={this.state.title}>
<div>
<h1>New Article</h1>
<input
value={this.state.title}
onChange={(e) => this.setState({ title: e.target.value })}
/>
</div>
</DocumentTitle>
);
}
}If you use it on server, call DocumentTitle.rewind() after rendering components to string to retrieve the title given to the innermost DocumentTitle. You can then embed this title into HTML page template.
Because this component keeps track of mounted instances, you have to make sure to call rewind on server, or you'll get a memory leak.
Looking for something more powerful? Check out React Helmet!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent