notes

Storybook Addon Notes

---

Storybook Addon Notes allows you to write notes (text or HTML) for your stories in Storybook.

Framework Support

Getting Started

npm i --save-dev @storybook/addon-notes

Then create a file called addons.js in your storybook config.

Add following content to it:

import '@storybook/addon-notes/register';

Then write your stories like this:

import { storiesOf } from '@storybook/react';
import { withNotes } from '@storybook/addon-notes';

import Component from './Component';

storiesOf('Component', module)
  .add('with some emoji', withNotes('A very simple component')(() => </Component>));

Using Markdown

To use markdown in your notes simply import a markdown file and use that in your note.

import { storiesOf } from '@storybook/react';
import { withNotes } from '@storybook/addon-notes';
import Component from './Component';
import someMarkdownText from './someMarkdownText.md';

storiesOf('Component', module)
  .add('With Markdown', withNotes(someMarkdownText)(() => <Component/>));

If you want to use Github flavored markdown inline, use withMarkdownNotes:

import { storiesOf } from '@storybook/react';
import { withMarkdownNotes } from '@storybook/addon-notes';
import Component from './Component';

storiesOf('Component', module)
  .add('With Markdown', withMarkdownNotes(`
# Hello World

This is some code showing usage of the component and other inline documentation

~~~js
<div>
  hello world!
  <Component/>
</div>
~~~
  `)(() => <Component/>));

Deprecated API

This API is slated for removal in 4.0

import { WithNotes } from '@storybook/addon-notes';

storiesOf('Addon Notes', module)
  .add('using deprecated API', () => (
    <WithNotes notes="Hello">
      <BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />
    </WithNotes>
  ));