New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Custom Events Broadcaster
storybook addon for broadcasting custom events
npm install storybook-addon-custom-event-broadcaster
Last updated 4 months ago
159
Downloads per week
Readme 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/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.

Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI