Skip to content

Latest commit

 

History

History
67 lines (47 loc) · 2.68 KB

README.md

File metadata and controls

67 lines (47 loc) · 2.68 KB

Storybook Addon Notes

Build Status on CircleCI CodeFactor Known Vulnerabilities BCH compliance codecov Storybook Slack Backers on Open Collective Sponsors on Open Collective


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

Framework Support

Storybook Addon Notes Demo

Getting Started

NOTE: Documentation on master branch is for alpha version, stable release is on release/3.4

yarn add -D @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 add the withNotes decorator to all stories in your config.js:

// Import from @storybook/X where X is your framework
import { configure, addDecorator } from '@storybook/react';
import { withNotes } from '@storybook/addon-notes';

addDecorator(withNotes);

You can use the notes parameter to add a note to each story:

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

import Component from './Component';

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

Using Markdown

To use markdown in your notes, either through import or inline, simply put it in the markdown property of your note.

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

storiesOf('Component', module).add(
  'With Markdown',
  () => <Component />,
  { notes: { markdown: someMarkdownText } }
);