storybook/addons/info

Storybook Info Addon

Storybook Info Addon will show additional information for your stories in Storybook. Useful when you want to display usage or other types of documentation alongside your story.

This addon works with Storybook for: React.

Installation

Install the following npm module:

npm i -D @storybook/addon-info

Basic usage

Then wrap your story with the withInfo, which is a function that takes either documentation text or an options object:

import { configure, setAddon } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

storiesOf('Component', module)
  .add('simple info',
    withInfo('doc string about my component')(() =>
      <Component>Click the "?" mark at top-right to view the info.</Component>
    )
  )

Usage with options

withInfo can also take an options object in case you want to configure how the info panel looks on a per-story basis:

import { configure, setAddon } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

storiesOf('Component', module)
  .add('simple info',
    withInfo({
      text: 'doc string about my component',
      maxPropsIntoLine: 1,
      maxPropObjectKeys: 10,
      maxPropArrayLength: 10,
    )(() =>
      <Component>Click the "?" mark at top-right to view the info.</Component>
    )
  )

Usage as decorator

It is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.

It is important to declare this decorator as the first decorator, otherwise it won't work well.

addDecorator((story, context) => withInfo('common info')(story)(context));

Global options

To configure default options for all usage of the info option, use setDefaults in .storybook/config.js:

// config.js
import { setDefaults } from '@storybook/addon-info';

// addon-info
setDefaults({
  inline: true,
  maxPropsIntoLine: 1,
  maxPropObjectKeys: 10,
  maxPropArrayLength: 10,
  maxPropStringLength: 100,
});

Deprecated usage

There is also a deprecated API that is slated for removal in Storybook 4.0.

import { configure, setAddon } from '@storybook/react';
import infoAddon from '@storybook/addon-info';

setAddon(infoAddon);

configure(function () {
  //...
}, module);

Then create your stories with the .addWithInfo API.

import React from 'react';
import { storiesOf } from '@storybook/react';
import Component from './Component';

storiesOf('Component')
  .addWithInfo(
    'simple usage',
    `This is the basic usage with the button with providing a label to show the text.`,
    () => (
      <Component>Click the "?" mark at top-right to view the info.</Component>
    ),
  );

Have a look at this example stories to learn more about the addWithInfo API.

The FAQ

Components lose their names on static build

Component names also get minified with other javascript code when building for production. When creating components, set the displayName static property to show the correct component name on static builds.