Events
Add events to your Storybook stories.
npm install @storybook/addon-events
3.8k
Downloads per week
Made by Storybook

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} />
);