@kadira/react-storybook-addon-info

React Storybook Info Addon

A React Storybook addon to show additional information for your stories.

Usage

Install the following npm module:

npm i --save @kadira/react-storybook-addon-info

Then set the addon in the place you configure storybook like this:

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

setAddon(infoAddon);

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

Then create your stories with the .addWithInfo API.

import React from 'react';
import Button from './Button';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('Button')
  .addWithInfo(
    'simple usage',
    `
      This is the basic usage with the button with providing a label to show the text.
    `,
    () => (
      <div>
        <Button label="The Button" onClick={action('onClick')}/>
        <br />
        <p>
          Click the "?" mark at top-right to view the info.
        </p>
      </div>
    ),
  );

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