Wondering what’s next for npm?Check out our public roadmap! »

    @storybook/addon-events
    TypeScript icon, indicating that this package has built-in type declarations

    6.2.9 • Public • Published

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

    Install

    npm i @storybook/addon-events

    DownloadsWeekly Downloads

    4,267

    Version

    6.2.9

    License

    MIT

    Unpacked Size

    47.6 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar