Permalink
Switch branches/tags
3407-repro 3972-options-knob-on-next 4848-new-example-format add-navbar add-polymer3-support add-react-error-overlay add-typings addon-api-concept addon-knob-vue-decoratorless addon-readme addon-resources core/remove-basic-config dd/babel-plugin-react-docgen-2 dependabot/npm_and_yarn/docs/gatsby-plugin-sharp-2.0.15 dependabot/npm_and_yarn/react-native-modal-datetime-picker-6.0.0 docs-v2-babel docs-v2-highlights docs-v2-monaco docs-v2 docs-v2.1 docs/add-versions-json docusaurus feature/add-navbar-refactor feature/add-navbar feature/custom-react-scripts fix/husky-deprecation fix/react-scripts-latest-fixture issue-3972-options-knob knobs-objects knobs/v2 master ndelange/hoisting-rn ndelangen/RN-fixattempt1 ndelangen/RN-fixattempt2 ndelangen/RN-fixattempt3 ndelangen/RN-fixattempt4 ndelangen/RN-fixattempt5 ndelangen/config-refactor ndelangen/docs-in-official ndelangen/hoisting-rn-attempt1 ndelangen/new-layoutsystem ndelangen/nicer-official-demo ndelangen/reactnext ndelangen/replace-html-webpack-plugin-v2 ndelangen/replace-html-webpack-plugin ndelangen/revert-tgz-file-dependencies ndelangen/temp2 new-docs next ng-dynamic-template oblador/fix-metro-flags-rn-57 on-device-addons on-device-ui-all-prs patch-1 patch-2 poc/addon-editor poc/liveedit-addon poc/liveedit-in-storysource-old poc/liveedit-in-storysource pr/JalilArfaoui/3909 pr/hipstersmoothie/4704 pr/kkemple/4482 pr/maacky/4856 presets/default-webpack react-native-on-device react-native/use-core-for-server redux-ui refactoring/remove-mantra-ui-overhaul-routing refactoring/remove-mantra-ui-overhaul refactoring/remove-mantra release/3.3 release/3.4 release/4.0 release/4.1-merged release/4.1 repro-instruction-update rn-tab-open shilman/angular-cli-example shilman/remove-withevents shilman/3.2.12-release snyk-fix-1n1s5x snyk-fix-iu4xwt snyk-fix-m3aahq snyk-fix-ncwvxj snyk-fix-pek1pb snyk-fix-q1x0k4 snyk-fix-rum9x7 snyk-fix-wmry50 storysource-with-deps tech/emotion10 tech/overhaul-ui-addon-notes-ts tech/overhaul-ui-store tech/overhaul-ui tech/try-github-workflos tmeasday/add-refs-to-stories tmeasday/check-react-access-3.4 tmeasday/embed-preview-context try-to-fix-master ts-migration/channels
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
80 lines (58 sloc) 2.91 KB
id title
using-addons
Using Addons

Storybook comes with a variety of "core" addons developed and maintained alongside Storybook. Most examples in this site use actions and links. But it's easy to use any third party addons distributed via NPM.

Here's how to do it.

We are going to use an addon called Notes. Basically, it allows you to write notes for your stories.

First, we need to install the addons:

yarn add -D @storybook/addons @storybook/addon-actions @storybook/addon-links @storybook/addon-notes

Then, we need to create a file called addons.js inside the storybook config directory and add the following content:

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

Once created, youl'll have to restart storybook to make the underlying webpack aware of the addons file.

This will register all the addons and you'll be able to see the actions and notes panels (in that order) when you are viewing the story. (Links do not register a tab--check individual addon docs to see which Storybook features they use!)

Stories without notes

Now when you are writing a story, import it and add some notes:

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Button from './Button';

storiesOf('Button', module).add(
  'with some emoji',
  () => (
    () => (
      <Button onClick={action('clicked')}>
        <span role="img" aria-label="so cool">
          😀 😎 👍 💯
        </span>
      </Button>
    ),
    { notes: 'A very simple component' }
  )
);

Then you'll be able to see those notes when you are viewing the story.

Stories with notes

Global Configuration

Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in .storybook/config.js. Here's an example of how you might do that.

import { configure, addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

addDecorator(
  withOptions({
    name: 'CRA Kitchen Sink',
    goFullScreen: false,
    showAddonsPanel: true,
    showSearchBox: false
    // more configuration here
  })
);

Here's an example of a production-ready config file from the cra-kitchen example.

Just like this, you can install any other addon and use it. Have a look at our addon gallery to discover more addons.