Add-ons in Storybook

Enhancing stories with add-ons

The magic of Storybook is its extensibility in the form of assorted add-ons. There are abundant options for making your documentation richer through these handy plugins.

• Let’s start with the Actions add-on. This will add a panel to the bottom of the page for reporting events. We’ll use it to display onIndexChange events. Start by installing the add-on from npm:

  $ npm install --save-dev @storybook/addon-actions@4.1.11
  + @storybook/addon-actions@4.1.11
  

• Then create a new file called .storybook/addons.js and add this line to register the new add-on:

  // .storybook/addons.js
  import '@storybook/addon-actions/register';
  

  The webpack server watches existing files for updates, but won’t recognize new files, so you’ll need to restart it before continuing.

• Now add a bit of code to the Carousel story to tell the add-on to listen for onIndexChange: