Search⌘ K
Home
Courses
Test-driven Development with React

Add-ons in Storybook

Explore how to enhance React component documentation using Storybook add-ons such as Actions and Knobs. Learn to customize props interactively and deploy your Storybook documentation using GitHub Pages for continuous collaboration and integration.

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:

Javascript (babel-node)
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 ...