Storybook: Set the current story name in the title

[shilman]

Issue by arunoda
_Monday Aug 15, 2016 at 06:19 GMT_
_Originally opened as https://github.com/storybooks/storybook-ui/issues/28_

---

It's great if we can set the title as the current story name(with the kind name) as shown below:

Kindname.storyname || Storybook

[shilman]

Comment by TheSisb
_Wednesday Jan 18, 2017 at 21:47 GMT_

---

+1 or custom title

[ndelangen]

Related: #952

If we could expose an API for setting the header, an addon could be created to set it onStory()

1209 api part will be part of api-v2

[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. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[Hypnosphi]

Doesn‘t addon-options solve the issue?

[ndelangen]

Yes it can, but that's super verbose.

We should make it the default behavior that a selected kind + name would appear in the page title.

[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 60 days. Thanks!

[skybrandevs]

please how do i add this to my exisiting react project . how do i use this to create a component a draggable component

[skybrandevs]

i dont understand this any video example on this

[danielduan]

While this feature is nice to have, I'm gonna close this ticket since this has been open for a while.

Please open a new issue or PR and reference this one if you're interested in working on this.

[achenwei-chwy]

@danielduan don't understand... seems, @janmichek answer in https://github.com/storybooks/storybook/issues/812 works pretty well... why not just use that?

TLDR

<script>
    document.title = 'My Title';
</script>
<style>
    h3{
        font-size: 0!important;
    }
    h3:after{
        content: "My Styleguide";
        font-size: 12px!important;
    }
</style>
<link rel="icon" type="image/png" href="./img/my-favicon.ico">

[janmichek]

@adamchenwei This should be the proper way to set Storybook header name in config.js
https://github.com/storybooks/storybook/tree/master/addons/options

import { setOptions } from '@storybook/addon-options';

setOptions({
  name: 'My Styleguide',
  url: 'https://site.com',
});

[brunoreis]

I have two configs. One I'm using for global components. The other one, for specific functionalities. Both show as "Storybook" in the page title, and so in the browser tab.

I see that sometimes people are talking about the title on the upper left corner of the page and in other times, about html title. So, I just want to add to this saying it would be nice to be able to set the html title.

[martinmacko47]

@adamchenwei The method you describe is an ugly hack, not a solution.

Please add title to setOptions arguments or use name from setOptions as the title as well.

[Hypnosphi]

@martinmacko47 Both make sense to me. Would you like to open a PR?

[sdailly]

any PR ? - about this

[Hypnosphi]

@sdailly none so far, so you're free to give it a try. I'd recommend to use something like this package: https://github.com/gaearon/react-document-title

[ndelangen]

Should be implemented in this:
https://github.com/storybooks/storybook/pull/4086

[ndelangen]

Working on this

[ndelangen]

Feature has been merged into next

[shilman]

Yay!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-alpha.7 containing PR #5277 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[flxwu]

The document title still doesn't update for me, although I'm on the latest version :(

[herman-rogers]

This also doesn't update for me on v5.2.1 - there's about 5 tickets on it all closed and chained to the next ticket. Not sure why it keeps getting closed when it hasn't been addressed.

812

581

952

4993

6339

8056

[shilman]

@herman-rogers This issue is open and marked as high priority. We have 391 issues open, and are working through them as quickly as we can. If you'd like it fixed more quickly, I would be more than happy to review a PR if you provided one.

[rtkaaho]

FWIW it seems this feature is partially working in version 5.3.0-alpha.45. However, out of curiosity, is there any way to manually set the page title via configuration? For now the default is Storybook as per the managers index.ejs but I can seem to find anywhere in the code where we are able to modify the options that are passed to HTMLWebpackPlugin and I dont really want to have to override it in a custom webpack config.

If this isn't a thing, i'd be more than happy to implement it. Any help would be appreciated!

[jayarjo]

Is this fixed or not? I'm not sure. Also addon-options seems to be deprecated now - so no way to achieve this?

[jayarjo]

Setting Storybook title to the current story name is one problem. But there's another one - title of the preview iframe should be updated as well. Otherwise this what happens when I try to select store instance in Redux Devtools:

Related: https://github.com/storybookjs/storybook/issues/522#issue-180174479

As a solution adapted the following from: https://github.com/storybookjs/storybook/issues/812#issuecomment-610154066

import addons from '@storybook/addons';
import { STORY_RENDERED } from '@storybook/core-events';

// set a title of the preview iframe to that of current story
addons.register('addon-title', (api) => {
  const customTitle = 'Cartographer Story'; // Define your customTitle title
  const setTitle = () => {
    let storyData;
    try {
      storyData = api.getCurrentStoryData();
    } catch {
      console.info(`addon-title: wasn't able to change the title of Story iframe`);
    }
    const title = storyData ? `${storyData.kind} - ${storyData.name} ⋅ ${customTitle}` : customTitle;
    const iframe = document.getElementById('storybook-preview-iframe');
    if (iframe && iframe.contentDocument.title !== title) {
      // As few dom operations as possible
      iframe.contentDocument.title = title;
    }
  };
  setTitle();
  api.on(STORY_RENDERED, (story) => {
    setTimeout(setTitle, 100);
  });
});

[shilman]

@jayarjo any interest in fixing this inside storybook?

[jayarjo]

@shilman I'd gladly participate, but don't think I will be able to find time. Maybe later.

[spaceninja]

Now that v6 is out, is there a way to do this? I'd really like to be able to change the title in the browser tab from "Storybook" to whatever the name of my pattern library is.

[dutscher]

@spaceninja use a manager-head.html add <title>TITLE</title> and it overrides the <title>Storybook</title>

cheers