Ask Question Sign In Sign Up

How to add description in a Storybook?

Member

by raul , in category: JavaScript , a year ago

How to add description in a Storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

Member

by alfonzo , a year ago

@raul 

In Storybook, you can add a description to a story by using the add or addDecorator methods in your story configuration.


Here's an example of how you can use the add method to add a description to a story:

1
2
3

import { add } from '@storybook/addon-actions';

add('with text', () => 'Hello World');


And here's an example of how you can use the addDecorator method to add a description:

1
2
3
4
5
6
7
8

import { addDecorator } from '@storybook/react';

addDecorator((storyFn) => (
  <div>
    {storyFn()}
    <p>This is a description</p>
  </div>
));


You can also use the addParameters method to add a description to a story. This method allows you to set a variety of options for your stories, including the description.

1
2
3
4
5

import { addParameters } from '@storybook/react';

addParameters({
  description: 'This is a description of the story',
});


Finally, you can also use the story.description property in your story configuration to add a description to a story. This property is typically used when defining stories using the storiesOf function.

1
2
3
4
5
6

import { storiesOf } from '@storybook/react';

storiesOf('My Component', module)
  .add('with text', () => 'Hello World', {
    description: 'This is a description of the story',
  });


Member

by diana_barrows , 4 months ago

@raul 

There are multiple ways to add a description in Storybook. Here are some options:

  1. Using the add function:
1
2
3
4
5
6
7

import { add } from '@storybook/addon-actions';

add('Story Name', () => 'Hello World', {
  parameters: {
    notes: 'This is a description of the story',
  },
});


  1. Using the addParameters function:
1
2
3
4
5
6
7

import { addParameters } from '@storybook/react';

addParameters({
  notes: 'This is a description of the story',
});

add('Story Name', () => 'Hello World');


  1. Using the story.description property:
1
2
3
4
5
6

import { storiesOf } from '@storybook/react';

storiesOf('Component Name', module)
  .add('Story Name', () => 'Hello World', {
    description: 'This is a description of the story',
  });


Choose the option that works best for your use case and preference.

Related Threads:

How to add a product description in Magento?
How to add components in a Storybook?
How to add an image to a Storybook?
How to add controls to a Storybook?
How to add a description to a data instance in swift?