storybook-addon-postmessage v5.1.9

Storybook Addon PostMessage

The PostMessage Addon can be used to send post messages to the preview iframe of Storybook.

Installation

npm i -D storybook-addon-postmessage

Configuration

Registration

Create or edit addons.js in your .storybook configuration directory.

Add following content to it:

import "storybook-addon-postmessage/register";

Configuration

Create or edit config.js in your .storybook configuration directory.

Add following content to it:

// Requirements
import { addParameters } from '@storybook/react';

// Configure post message
addParameters({
    postmessage: [
        {
        	  // The displayed text
            label: 'Lorem Ipsum',
            // Displayed as a "icon"
            code: 'LI',
            // Text color of the icon
            textColor: 'white',
            // Background color of the icon
            backgroundColor: '#E6370A',
            // The message that is sent via postMessage
            message: { ... },
            // This is active by default
            selected: true
        }
    ]
});

Usage

Your components need to listen to postMessage and do something ...