storybook-addon-custom-event-broadcaster

    1.1.0 • Public • Published

    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.

    Install

    npm i storybook-addon-custom-event-broadcaster

    DownloadsWeekly Downloads

    183

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    25.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • derkuba