Dynamic window title - Githubissues

jtomaszewski commented 3 years ago

Currently all our admin app browser tabs are named in the same way; and the names in the browser history aren't really helpful neither:

Maybe we could add some useEffect code to https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/Title.tsx that updates the document.title whenever new title is set? WDYT?

MicroJackson commented 3 years ago

How I do it with my React Admin:

class SettingsList extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        document.title = "Some new document title.";
    }

    ......

And it shows that in the history and as the title. But maybe a MaterialUI update version is better.

djhi commented 3 years ago

@jtomaszewski Thanks for the suggestion! Would you mind creating a PR for it?

andrico1234 commented 3 years ago

Is someone currently working on this? If not, I'd be happy to give it a shot

andrico1234 commented 3 years ago

@djhi I got carried away 😅

https://github.com/marmelab/react-admin/pull/6118

fzaninotto commented 3 years ago

Fixed by #6119

andrico1234 commented 3 years ago

@fzaninotto can we re-open this issue as the change was reverted. I'm going to give @wmwart's suggestion,

fzaninotto commented 3 years ago

Yep, the fix was reverted in #6357, so I'm reopening it.

panfiva commented 2 years ago

FYI, users can customize browser page title using react-helmet. See example code that can be placed in Show, Edit, List or Create components.

  <Helmet>
      <title>New page title</title>
  </Helmet>

btoro commented 1 year ago

FYI, users can customize browser page title using react-helmet. See example code that can be placed in Show, Edit, List or Create components.
  <Helmet>
      <title>New page title</title>
  </Helmet>

Ideally, the component would automatically sent the title over to Helmet, rather than having users add the title to each page / view.</p> <p>You can use react portals to inject the title into the <title> component of react-helmet, but unfortunately, RA adds an additional <span> around the text, which messes up the header title.</p> <p>It would be great if we can override the Title component as part of the customization / layout </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lefuturiste"><img src="https://avatars.githubusercontent.com/u/20988163?v=4" />lefuturiste</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <p>@fzaninotto I'm interested to work on this issue. Before opening a new PR, I will discuss the details here. For a start, I propose to make this feature an opt-in change. So by default it keep the same behavior as before. So probably we should add a new boolean prop, eg. <code>mirrorTitleToDocumentTitle={true}</code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/fzaninotto"><img src="https://avatars.githubusercontent.com/u/99944?v=4" />fzaninotto</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <p>React 19 introduces the <code><title></code> tag that does exactly that. If we can use if in a backward-compatible way (i.e. without breaking apps using React 18), it's the best solution. We could simply update <code>PageTitle</code> to set <code><title></code>in addition to the <code>TitlePortal</code>.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

marmelab / react-admin

Dynamic window title #5893