@storybook/addon-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 { 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 { 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.

To customize your defaults:

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

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

React Docgen Integration

React Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during compile time. When rendering a story with a React component commented in this supported format, the Addon Info prop table will display the prop's comment in the description column.

import React from 'react';
import PropTypes from 'prop-types';

/** Button component description */
const DocgenButton = ({ disabled, label, style, onClick }) =>
  <button disabled={disabled} style={style} onClick={onClick}>
    {label}
  </button>;

DocgenButton.defaultProps = {
  disabled: false,
  onClick: () => {},
  style: {},
};

DocgenButton.propTypes = {
  /** Boolean indicating whether the button should render as disabled */
  disabled: PropTypes.bool,
  /** button label. */
  label: PropTypes.string.isRequired,
  /** onClick handler */
  onClick: PropTypes.func,
  /** component styles */
  style: PropTypes.shape,
};

export default DocgenButton;

Storybook Info Addon should now render all the correct types for your component.

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.