storybookjs / addon-events

Add events to your Storybook stories.

Storybook Addon Events

This storybook (source) addon allows you to add events for your stories.

Framework Support

Storybook Addon Events Live Demo

Getting Started

npm i --save-dev @storybook/addon-events event-emitter

within .storybook/main.js:

module.exports = {
  addons: ["@storybook/addon-events"],
};

Then write your stories like this:

import withEvents from "@storybook/addon-events";
import EventEmitter from "event-emitter";

import Logger from "./Logger";
import * as EVENTS from "./events";

const emitter = new EventEmitter();
const emit = emitter.emit.bind(emitter);

export default {
  title: "withEvents",
  decorators: [
    withEvents({
      emit,
      events: [
        {
          name: EVENTS.TEST_EVENT_1,
          title: "Test event 1",
          payload: 0,
        },
        {
          name: EVENTS.TEST_EVENT_2,
          title: "Test event 2",
          payload: "asdasdad asdasdasd",
        },
        {
          name: EVENTS.TEST_EVENT_3,
          title: "Test event 3",
          payload: {
            string: "value",
            number: 123,
            array: [1, 2, 3],
            object: {
              string: "value",
              number: 123,
              array: [1, 2, 3],
            },
          },
        },
        {
          name: EVENTS.TEST_EVENT_4,
          title: "Test event 4",
          payload: [
            {
              string: "value",
              number: 123,
              array: [1, 2, 3],
            },
            {
              string: "value",
              number: 123,
              array: [1, 2, 3],
            },
            {
              string: "value",
              number: 123,
              array: [1, 2, 3],
            },
          ],
        },
      ],
    }),
  ],
};

export const defaultView = () => <Logger emitter={emitter} />;

Credits

While this addon was part of the Storybook monorepo, it received commits from the following authors:

Aaron Reisman, Andrew Lisowski, Armand Abric, Brody McKee, Clément DUNGLER, Daniel Duan, Evgeniy Zaitsev, Filipp Riabchun, Gaëtan Maisse, Grey Baker, Hypnosphi, Jay Sherby, Jimmy Somsanith, Jon Palmer, Lynn Chyi, Michael Shilman, Michaël De Boey, Minh Nguyen, Norbert de Langen, Paul Rosania, Pavan Kumar Sunkara, Simen Bekkhus, Tom Coleman, Varun Vachhar,