Custom Events Broadcaster
storybook addon for broadcasting custom events
npm install storybook-addon-custom-event-broadcaster
116
Downloads per week

storybook-addon-custom-event-broadcaster

Custom panel tab to send custom events to components.

This addon adds a tab to the addon panel. It has a set of input fields. The input of these fields are used to create a custom event.

Input functionality
EventName Name of the event
Data custom data, to be send in the event
Selector the selector of the node the event will be fired on
"send"-Button Push to send the event

Install

npm install storybook-addon-custom-event-broadcaster

Add the addon to the storybook configuration:

// .storybook/main.js
module.exports = {
 ...
  addons: [
   ...
    'storybook-addon-custom-event-broadcaster/dist',
  ],
};

Configuration in your story

To configure your story you need to add an customEventPanel-object to the parameters section. it has one required parameter eventName and two optional parameters eventData,selector. It is analogous to the three input fields.

If the selector-field is empty, the event will be fired on the document-object of the page. if it is filled it will fire the event on the selected node.

// \*.stories.jsx
// example configuration of 3 lines
export default {
  title: "Content/MyStory",
  parameters: {
    customEventPanel: [
      {
         eventName: "event:example",
      }
      {
        eventName: "my:event",
        eventData: {
          opt: 23,
        },
        selector: ".selector",
      },
      {
        eventName: "my:otherevent",
        eventData: {
          foo: 23,
        },
      },
    ],
  },
  argTypes: {},
};

Plugin in Action

usage example

I have a example project using this addon on https://github.com/derKuba/stenciljs-tutorial/tree/main/component-lib.