I've been using react-document-title for an isomorphic project and quickly discovered that most of the pages that are being rendered on the server could use generated metadata such as description and Open Graph.

I'm proposing renaming the project to react-document-metadata and expand usage to arbitrary props in addition to title:

<Metadata
  title="My fine page"
  opengraph={{image: this.state.image.url}}
  description={this.getDescription()} />

Naturally only title would be read by the browser for updating window.title but it could also be expanded to support things like dynamic favicons.

Thoughts?

Since 'mountedInstances' is a static property on DocumentTitle it's shared state across all requests. Doesn't this cause race conditions? I'm not sure I totally get how it works yet (i'm new to nodejs and react too).

I've taken the liberty to add a couple of tests to make sure the component behaves as it should.

You were right about the life cycle implications of componentDidMount, apparently componentDidMount bubbles up while componentWillMount trickles down. I'm guessing this is because componentDidMount expects the component's children to be fully initialized and this is the only way to accomplish that.

Instead I've just added a simple typeof check to bail out when document is not defined. As this is a global variable, typeof is the only way to determine its existence without causing a reference error.

I wasn't able to reproduce the issue with addons.Children.only, so I've not touched that code.

I've also added a lint script so you can run jshint with npm run lint without having to install it globally.

Emulating a browser via the global module is probably not the most reliable way to test the browser behaviour, but adding a browser test runner as dependency seems overkill.

This change prevents the document.title of being updated regardless if it had changed or not.

When using DocumentTitle today, any time some child component updates, the current document.title updates as well, and it shouldn't.

According to React's component reference, componentWillMount will also be run on the server. This means bad things will happen (namely, it will attempt to access document on the server, which likely throws an exception).

~~I don't see any reason not to use componentDidMount instead.~~

EDIT: See PR #2 for why we can't use componentDidMount for this component.

according to this line https://github.com/gaearon/react-document-title/blob/master/index.js#L6

It seems to me that the _serverTitle is singleton for whole server. isn't it?

To prevent React>=15.5.0 from throwing warnings we can't use React.createClass or React.PropTypes directly. For both there are now separate packages on npm. In case of createClass the recommendation is to convert to a ES6 class, however that's a bit more of an involved change. Instead, I reckon we can get this version out and silence those warnings first and then tackle a conversion to ES6 class separately.

Note: linter and all tests pass, but a warning is thrown by React during tests about calling a used PropType directly. However, I can't seem to figure out why, so it's probably caused by react-side-effect?

Initial idea:

@title(props => `${props.user.name}'s page`)
class SomeComponent extends Component {
}

Has its downsides. One obvious example:

// works
class SomeComponent extends Component {
  render() {
    return (
      <DocumentTitle title={`{this.state.user}'s profile`}>
        ..
      </DocumentTitle>
    );
  }
}

// won't work in the proposed api
@title(...)
class SomeComponent extends Component {
  render() {
    return (
      ..
    );
  }
}

But this doesn't happen very happen often, and I don't think it should. See Smart and Dumb Components.

Would send a PR if this is okay.

Awesome work by the way, @gaearon!

Sorry for the newbie question, but I'm having trouble getting this running.

I've run npm install --save react-document-title

Then I tried require('../../node_modules/react-document-title/index.js') from my main.js file, then use webpack or browserify to create a bundle.js and link that in instead of the main.js file, but it says Uncaught ReferenceError: DocumentTitle is not defined in my JSX file.

I see that the bundle is loaded in the browser, and I can see the react-document-title code in the bundle, but it's not available to my JSX for some reason. It's probably a rookie mistake, but I'm stumped. Hope you can give any pointers.

Cheers

Example source code:

index.html

    <script src="https://fb.me/react-with-addons-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.min.js"></script>
    <script src="~/src/js/bundle.js"></script>
    <script type="text/jsx" src="~/Content/lib/jsx/main.jsx"></script>

main.js

'use strict'

var DocumentTitle = require('../../node_modules/react-document-title/index.js');

main.jsx

var Router = ReactRouter;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var App = React.createClass({
    render: function() {
        return (
            <DocumentTitle title='Home'>
                <this.props.activeRouteHandler />
                <div id="wrapper">
                </div>
            </DocumentTitle>
        );
    }
});

React = require('react'),
DocumentTitle = require('react-document-title');
var Component = React.createClass({
      render: function () {
        return React.createElement(DocumentTitle, {title: 'irrelevant'} );
      }
});

var markup = React.renderToStaticMarkup(React.createElement(Component));

this is a slightly modified logic of https://github.com/gaearon/react-document-title/blob/master/test/common.js#L9.

it is emitting '' as its markup.

I assume it is a bug since we are claiming in README.md that it doesn't emit anything to DOM

I think this works, with inspiration from Omniscient: https://github.com/omniscientjs/omniscient/blob/b6ab57f7fa64886370b2a8ef5e64ff91eac30ad2/package.json

May be can't use it like this?

<Route path="/path"
     render={() => (
      <DocumentTitle title="title">
              <Component/>
      </DocumentTitle>
 )} />

Using TypeScript and @types/react-document-title.

I'm trying to do import * as DocumentTitle from 'react-document-title'; but in my render() I get [ts] JSX element type 'DocumentTitle' does not have any construct or call signatures.

I tried import DocumentTitle from 'react-document-title'; and the page won't load properly.

export class Test extends React.Component<{}, {}> {
  render() {
    return (
      <DocumentTitle title="Hey">
        Test
      </DocumentTitle>
    );
  }
}

This will enable a bundler to omit the prop-types import. I don't think any tool is set up to actually do this (recognize the import is unused and eliminate it before bundling) but it'll save a few bytes either way.

When using this library with TypeScript, I am encountering errors when running tests:

import DocumentTitle from 'react-document-title';

// ...

renderToString(
                    <DocumentTitle title="Hello World">
                        <AppComponen/>
                    </DocumentTitle>
);

My typings file:

// @types/react-document-title.d.ts

declare module 'react-document-title' {
    import * as React from 'react';

    interface DocumentTitleProps {
        title: string;
    }

    export default class DocumentTitle extends React.Component<DocumentTitleProps, any> {
        public static rewind(): string;
        public static peek(): string;
    }
}

This code runs perfectly fine when executed on the server, but during testing it fails:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Debugging shows that the import of react-document-title simply returns undefined when using jest, but the proper class when running the server.

Does anybody know what might be the cause of this?

I'm a bit confused by Readme of this library.

Can be defined in many places throughout the application

I'm surprised because though the document title can change many times, at any given time there is only one title. Isn't using DocumentTitle component in various places throught the application, splitting the logic of the aplication?