Skip to content

Commit

Permalink
Merge pull request #23 from storybooks/1017-deprecate-builtin-addons
Browse files Browse the repository at this point in the history
Fix one more documentation relating to default addons
  • Loading branch information
thani-sh authored May 13, 2017
2 parents 21f9955 + b402c44 commit 6c31a77
Showing 1 changed file with 6 additions and 20 deletions.
26 changes: 6 additions & 20 deletions pages/docs/react-storybook/addons/using-addons/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,27 @@ id: 'using-addons'
title: 'Using Addons'
---

By default, Storybook comes with two addons, which are [actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) and [links](https://github.com/storybooks/storybook/tree/master/packages/addon-links). But you can use any third party addons distributed via NPM.
Storybook comes with a variety of "core" addons developed and maintained alongside Storybook. Most examples in this site use [actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) and [links](https://github.com/storybooks/storybook/tree/master/packages/addon-links). But it's easy to use any third party addons distributed via NPM.

Here's how to do it.

Now we are going to use an addon called [Notes](https://github.com/storybooks/storybook/tree/master/packages/addon-notes). Basically, it allows you to write notes for your stories.
We are going to use an addon called [Notes](https://github.com/storybooks/storybook/tree/master/packages/addon-notes). Basically, it allows you to write notes for your stories.

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

~~~js
import '@kadira/storybook/addons';
~~~

This will load our default addons.

Then install the notes addon with:
First, we need to install the addons:

~~~sh
npm i --save '@kadira/storybook-addon-notes';
npm i --save-dev @kadira/storybook-addon-actions @kadira/storybook-addon-links @kadira/storybook-addon-notes
~~~


After that, add it to the addons.js like this:
Then, we need to create a file called `addons.js` inside the storybook config directory and add the following content:

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


Then you'll be able to see those notes when you are viewing the story.
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](../static/stories-without-notes.png)

Expand All @@ -60,7 +50,3 @@ Then you'll be able to see those notes when you are viewing the story.
![Stories with notes](../static/stories-with-notes.png)

Just like this, you can install any other addon and use it. Have a look at our [addon gallery](/docs/react-storybook/addons/addon-gallery) to discover more addons.

> This particular addon has created a panel in Storybook. Some addons may not create a panel and may use some other Storybook platform features.
>
> So, look at the addon’s own documentation on how to use it.

0 comments on commit 6c31a77

Please sign in to comment.