CODEWITHSUNDEEP
reactjsstorybook
cantera
cantera

Reputation: 25015

Storybook MDX: Dynamic Meta Title

How can I set a dynamic title property on a Storybook Meta component in a Markdown Extended *.stories.mdx file?

import { Meta } from '@storybook/addon-docs/blocks';

// displays title as 'undefined' in sidebar nav
<Meta title={conditionalValue ? 'foo' : 'bar'} />

I also tried wrapping Meta in a higher-order component, which triggers an error: Unexpected default export without title

import { Meta } from '@storybook/addon-docs/blocks';

export const MetaCustom = (props) => {
  const title = conditionalValue ? props.foo : props.bar;
  return <Meta title={title} />;
};

// mdx stories file
<MetaCustom foo="foo" bar="bar" />

Upvotes: 4

Views: 2927

Answers (2)

AmProsius
AmProsius

Reputation: 43

Follow-up: As of Storybook 7 dynamic titles are not allowed anymore. Neither as a function nor as a template literal.

// ✅ string literals 6.3 OK / 7.0 OK
export default {
  title: 'Components/Atoms/Button',
};

// ✅ undefined 6.3 OK / 7.0 OK
export default {
  component: Button,
};

// ❌ expressions: 6.3 OK / 7.0 KO
export default {
  title: foo('bar'),
};

// ❌ template literals 6.3 OK / 7.0 KO
export default {
  title: `${bar}`,
};

More info

Upvotes: 1

Armagan
Armagan

Reputation: 68

I tried creating a util function and import into the mdx and seems like it is working.

utils.js

export function generateTitle (condition) {
   return condition ? 'foo' : 'bar'
}

Component.stories.mdx

import { generateTitle } from './utils.js';

    <Meta
      title={generateTitle(true)}
    />

Hope that helps!

Upvotes: 3

Related Questions