Nothing's plumb meaningless

    @prashis/storybook-addon-message-bus
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    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 };

    Install

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

    DownloadsWeekly Downloads

    9

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    29.5 kB

    Total Files

    32

    Last publish

    Collaborators

    • prashis