Test-driven Development with React/

...

/

Add-ons in Storybook

Add-ons in Storybook

Learn how to use add-ons with Storybook to further enhance your Docs.

We'll cover the following...

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:

Press + to interact
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Carousel from '../src/Carousel';
import slides from '../example/slides';
storiesOf('Carousel', module).add('default', () => (
  <Carousel slides={slides} onIndexChange={action('onIndexChange')} />
));

With that change, you should see a new “Action ...