New
Community Showcase #5Visual test with Chromatic
Star78,835
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@prashis/storybook-addon-message-bus
Interact with message bus via Storybook UI
npm install @prashis/storybook-addon-message-bus
Last updated over 1 year ago
1
Downloads per week
Readme View on GitHub

Storybook Addon Message Bus

Storybook Addon w/ GUI for interacting with Message Bus 🚎

storybook-addon-message-bus-demo

Installation

npm i -D @prashis/storybook-addon-message-bus

Then add the following to .storybook/main.js:

module.exports = {
  addons: ["@prashis/storybook-addon-message-bus"],
};

Usage

Add an decorator in .storybook/preview.js (or individual stories) & pass the emitter callback function for emitting events

import { withMessageBus } from "@prashis/storybook-addon-message-bus";
import nanobus from "nanobus";

const bus = nanobus();

const emitter = (name, payload) => {
  bus.emit(name, payload);
};

export const decorators = [withMessageBus({ emitter })];

Finally, pass the list of event names & default payload in story parameters, which will be displayed inside the addon panel

const events = [
  {
    name: "notification.add",
    payload: {
      type: "success",
      message: "Illo et aspernatur saepe exercitationem fugit tenetur.",
    },
  },
];

const Template = () => <Notifications />;

export const List = Template.bind({});
List.parameters = { events };
Join the community
6,179 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI