A dcc.DocumentTitle Component for Updating the Page Title Dynamically

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!

[chriddyp]

OK, this feature is now available in dash==1.14.0. and is documented in http://dash.plotly.com/external-resources. See the “Update the Document Title Dynamically based off of the URL or Tab” example.

I’ll keep this issue open to consider a dcc.DocumentTitle component which would enable a Python interface to updating the title. The current example documented above uses a clientside callback (JavaScript).

[debilosaurus]

Hi there, I tried to set the “app.title” and the “app._favicon” for a monitoring app, searched and found this discussion. But I slightly disagree with your suggestion. From the view of the user (me), my fist attempt was to simply create the “app.id” attribute for the use as the output target with usual callback mechanism. This of course doesnt worked, but instead of creating more specialiced dcc function, this would be a way more compatible solution. First drawback: I dont know the dash code, so this maybe wont be easy to implement Second drawback: A consequence would be a change “app.layout” to the formal better “app.children” to make the app a proper parent. kr, Tx.