mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
60 lines
1.6 KiB
Markdown
60 lines
1.6 KiB
Markdown
# Storybook Addon Notes
|
|
|
|
Storybook Addon Notes allows you to write notes (text or HTML) for your stories in [Storybook](https://storybook.js.org).
|
|
|
|
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
|
|
|
|
|
|
|
### Getting Started
|
|
**NOTE: Documentation on master branch is for alpha version, stable release is on [release/3.4](https://github.com/storybooks/storybook/tree/release/3.4/addons/)**
|
|
|
|
```sh
|
|
yarn add -D @storybook/addon-notes
|
|
```
|
|
|
|
Then create a file called `addons.js` in your storybook config.
|
|
|
|
Add following content to it:
|
|
|
|
```js
|
|
import '@storybook/addon-notes/register';
|
|
```
|
|
|
|
Then add the `withNotes` decorator to all stories in your `config.js`:
|
|
|
|
```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:
|
|
|
|
```js
|
|
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.
|
|
|
|
```js
|
|
import { storiesOf } from '@storybook/react';
|
|
import Component from './Component';
|
|
import someMarkdownText from './someMarkdownText.md';
|
|
|
|
storiesOf('Component', module).add(
|
|
'With Markdown',
|
|
() => <Component />,
|
|
{ notes: { markdown: someMarkdownText } }
|
|
);
|
|
```
|