This is final story on developing Storybook component library for React project and here we are going to discuss about How to add addons to your project, Addons implement extra features for Storybooks to make your stories more useful.
If you are not having Storybook configured project please follow the articles before read this then you will have good knowledge on Storybook. It will be easy to understand Addons.
Basically, there are two types of addons, those are Decorators and Native Addons.
Decorators are wrapper components or Storybook decorators that wrap a story. For example, let’s say we want to center a story rendered on the screen. For that, we can use a Decorator Addon. Please refere the documentation for more details and sample.
Native addons use Storybook as a platform and interact with it. Native addons can add extra features beyond wrapping stories.For example,
storybook-actionsis such an addon. Please refere the documentation for more details and sample.
Let’s start to add some basic addons to your existing storybook project. First we are going to add npm modules for
knobs addons for that run the following command from your root project folder.
addons.js file under your
storyconfig folder and add the following code for import the register of each addon.
Now you have to add addons to your stories for that first import addons to your
index.js file in
Now import addons successfully and we are going to use the addons in the existing stories. Then add the decorators to all stories in your project.
stories/index.js file looks like this,
Final Storybook application
Now you can enjoy Storybook from developing your customized web application components.