react-router-document-title v1.0.3

Installation

npm install --save react-router-document-title

What it does

It updates the page document.title (it appears on your browser tab) on mount and on location updates. Wrap your top-level router components using withDocumentTitle higher-order component. It listens for location changes, so it assumes react-router RouteComponentProps are present.

Usage

withDocumentTitle('About Us')(AboutPage)

or

withDocumentTitle(getTitle)(AboutPage)

With basic React components

import withDocumentTitle from 'react-router-document-title';

class ClientPage extends React.Component {
  ...
}

export default withDocumentTitle('Client Details')(ClientPage);

With Redux compose

export default compose(withRouter, withDocumentTitle('About Us'))(AboutPage);

With connected React Redux components

import { compose } from 'redux';
import { connect } from 'react-redux';
import withDocumentTitle from 'react-router-document-title';

class ClientPage extends React.Component {
  ...
}

const ConnectedClientPage = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withDocumentTitle('Client Details')
)(ClientPage);

export default ConnectedClientPage;

Dynamic titles

Instead of passing a static string, you may pass a function that accepts the current location and component props as arguments. This means the handler does not need to live within the component itself and can be easily tested.

Using pathname only

import withDocumentTitle from 'react-router-document-title';

const getTitle = (pathname) => {
  if (pathname === '/calendar/day') return 'Day Calendar';
  if (pathname === '/calendar/week') return 'Week Calendar';
  if (pathname === '/calendar/month') return 'Month Calendar';

  return 'Calendar';
};

class CalendarPage extends React.Component {
  ...
}

export default withDocumentTitle(getTitle)(CalendarPage);

Using pathname and props

You can also access your component's props for more advanced logic

import withDocumentTitle from 'react-router-document-title';

const getTitle = (pathname, props) => {
  const { client } = props;

  if (pathname === '/client/create') return 'New Client';
  // Write the client's name
  if (client && pathname === `/client/${client.id}`)
    return `${client.name} Details`;

  return 'Client Details';
};

class ClientPage extends React.Component {
  ...
}

export default withDocumentTitle(getTitle)(ClientPage);

Manually updating the title

An updateDocumentTitle prop is injected into your component if you need to manually trigger updates based on other logic. In this example the title will be "Client Details" while waiting for a fetch to complete, then it will display the client's name.

import { DocumentTitleProps } from 'react-router-document-title';

type Client = { name: string };
type OwnProps = { client: Client };
type Props = DocumentTitleProps & OwnProps;

const getTitle = (pathname: string, props: Props): string => {
  const { client } = props;

  if (client) return `${client.name}`;

  return 'Client Details';
}

class ClientPage extends React.Component<Props> {
  
  componentDidUpdate(prevProps) {
    const { client, updateDocumentTitle } = this.props;

    // When the client data arrives...
    if (!prevProps.client && client) {
      // Trigger an update (will resolve via getTitle)
      updateDocumentTitle();
      // Or... you could pass a new string manually
      updateDocumentTitle(`Ding! ${client.name}`);
    }
  }

  // Or change the title following an interaction
  handleClick = () => this.props.updateDocumentTitle('clicked!');

  render() {
    return (
      <button onClick={this.handleClick}>Update title</button>
    )
  }

  ...
}

export default withDocumentTitle(getTitle)(ClientPage);

Configuration

Notes

Pull-requests welcome

License

MIT © Nico Troia