Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

A dcc.DocumentTitle Component for Updating the Page Title Dynamically #833

Description

@chriddyp

This would enable users to update the tab:

  1. When navigating pages with dcc.Location
  2. When updating tabs with dcc.Tabs

I've helped a customer with a similar component with an implementation below:

import {Component} from 'react';
import PropTypes from 'prop-types';

export default class DocumentTitle extends Component {

    componentDidMount() {
        document.title = this.props.children;
    }

    componentWillReceiveProps(nextProps) {
        document.title = nextProps.children;
    }

    render() {
        return null;
    }
}

DocumentTitle.defaultProps = {
    children: 'Dash'
}

DocumentTitle.propTypes = {
    children: PropTypes.string,
    id: PropTypes.string
}

To bring this into the library, we would need to:

  1. incorporate that code as a new component
  2. then add some tests
  3. Modify componentWillReceiveProps to the non-deprecated way of doing things with React
  4. Add docs to:
    • dash.plotly.com/urls
    • dash.plotly.com/dash-core-comoponents/documenttitle. Provide a cross link to /external-resources to mention how to set the page title via the server side template, which would provide the page title on page load rather than dynamically. Doing this on page load would be better for SEO.
    • Provide a link to these docs from the external-resources page where we discuss how to set the title in the server-side template and mention the limitations of that method (it will only update the page title on page load, not on subsequent navigation via dcc.Link)

If any community member takes this on before we get around to, please comment below!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions