Storybook: Setting a custom document title in React

[robbertolierook]

I'm not able to set a custom title. Even the workaround in the manager-view.html file doesn't work anymore (well it works for about 0.5 second):

<script> document.title = 'custom title'; </script>

I'm guessing this has to do with the implementation of #866. Setting a custom title shouldn't be this hard, an addParameter option for it would be awesome.

This has been asked a lot, so sorry if I'm missing something, but I could only find outdated answers to this question.

[shilman]

@robbertolierook What version of Storybook?

[robbertolierook]

@shilman It's storybook 5.0.5

[spiltcoffee]

@robbertolierook: Here's a workaround I found for this for now

• Put this into your manager-head.html file:

<script>
  var observer = new MutationObserver(function(mutations) {
    if (document.title.match(/Storybook$/)) {
      document.title = "custom title";
    }
  }).observe(document.querySelector("title"), {
    childList: true,
    subtree: true,
    characterData: true
  });
</script>

(MutationObservers have pretty good browser support, so this should work fairly well: https://caniuse.com/#search=mutationobserver)

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[jmlivingston]

@spiltcoffee - Nice tip! For others, I had to add this before the "var observer...", since it was looking for changes. A shame there isn't a less hacky way to do this.

document.title = "custom title";

[jmlivingston]

After trying several solutions, I finally found a clean solution for this. I'm a bit surprised this isn't documented anywhere as this seems like a very common use case.

Create a file called TitleAddon.js with the following content:

import addons from '@storybook/addons'
import { STORY_RENDERED } from '@storybook/core-events'
import packageJson from '../package.json'

addons.register('TitleAddon', api => {
  api.on(STORY_RENDERED, story => {
    const storyData = api.getCurrentStoryData()
    document.title = `${storyData.name} - ${packageJson.name}`
  })
})

Add a reference addons.js

import './TitleAddon'

Note: I'm using my package.json name as a suffix in the title, but this can be changed to anything. You can also add the storyData.kind if you're looking for the parent name as well.

[claudio-moya]

Hi @shilman I'm using v5.1.9 and this feature is not working with the new addParameters function, actually there is no 'title' option listed in the docs as well.

https://storybook.js.org/docs/configurations/options-parameter/

I checked the previous releases and this feature should be fixed on v5.0.0-alpha.7 but it still broken (https://github.com/storybookjs/storybook/issues/866).

Can you checked again please?
Thanx in advance.

[herman-rogers]

This is broken in v5.2.1 still. I set the document title and it's immediately overwritten with 'Storybook'. This should definitely be something easy to set and should have to require such a hack to get working.

[chvin]

'overwritten by Storybook' solution:

// .storybook/manager.js
import './titleAddon';

// .storybook/titleAddon.js
import addons from '@storybook/addons'
import { STORY_RENDERED } from '@storybook/core-events'

addons.register('TitleAddon', api => {
  const cunstomTitle = 'abc'; // Define your customTitle title
  let interval = null;
  const setTitle = () => {
    clearTimeout(interval);
    let storyData = null;
    try {
        storyData = api.getCurrentStoryData(); // Some time get error
    } catch(e) {}
    let title;
    if (!storyData) {
        title = cunstomTitle;
    } else {
        title = `${storyData.kind} - ${storyData.name} ⋅ ${cunstomTitle}`
    }
    if (document.title !== title) { // As few dom operations as possible
        document.title = title;
    }
    interval = setTimeout(setTitle, 100);
  };
  setTitle();
  api.on(STORY_RENDERED, story => {
    setTitle();
  })
});