Custom Events Broadcaster

storybook addon for broadcasting custom events

View on Github

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',
  ],
};

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.

Development scripts

  • npm start runs babel in watch mode and starts Storybook
  • npm run build build and package your addon code
Switch from TypeScript to JavaScript

Don't want to use TypeScript? We offer a handy eject command: npm run eject-ts

This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.