react-document-title
A declarative, nested, stateful document.title for React
Last updated 3 years ago by gaearon .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-document-title 
SYNC missed versions from official npm registry.

React Document Title

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.

====================

Installation

npm install --save react-document-title

Dependencies: React >= 0.13.0

Features

  • Does not emit DOM, not even a <noscript>;
  • Like a normal React compoment, can use its parent's props and state;
  • 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.

Example

Assuming you use something like react-router:

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>
    );
  }
});

Server Usage

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.

But What About Meta Tags?

Looking for something more powerful? Check out React Helmet!

Current Tags

  • 2.0.3                                ...           latest (3 years ago)

13 Versions

  • 2.0.3                                ...           3 years ago
  • 2.0.2                                ...           4 years ago
  • 2.0.1                                ...           5 years ago
  • 2.0.0                                ...           5 years ago
  • 1.0.4                                ...           5 years ago
  • 1.0.3                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.1.3                                ...           6 years ago
  • 0.1.2                                ...           6 years ago
  • 0.1.1                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
Maintainers (2)
Downloads
Today 832
This Week 2,613
This Month 10,927
Last Day 895
Last Week 5,122
Last Month 21,531
Dependencies (2)
Dev Dependencies (9)
Dependents (353)

Copyright 2014 - 2016 © taobao.org |