As high order component

[srph]

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!

[gaearon]

How about we change export to have two named exports: Title (component) and title (HOC)?

[srph]

That's a good idea. But IMO, new people coming to this library could get confused (maybe? :confused:).

[gaearon]

I'll close because I'm fairly satisfied with existing API and I don't want to have two ways to do the same thing.

[cooperka]

Posting my working HOC example because Google sent me to this issue:

import DocumentTitle from 'react-document-title';
import { compose, getDisplayName, setDisplayName } from 'recompose';

// HOC to set the document title from any page.
export function withDocumentTitle(title) {
  return (Component) => {
    const Enhanced = (props) => (
      <DocumentTitle title={title}>
        <Component {...props} />
      </DocumentTitle>
    );

    return compose(
      setDisplayName(getDisplayName(Component)),
    )(Enhanced);
  };
}

Usage:

const WelcomePage = /* ...your component... */;
export default withDocumentTitle('Welcome')(WelcomePage);