Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/channel-postmessage

Package Overview
Dependencies
Maintainers
5
Versions
1495
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/channel-postmessage

  • 7.0.24
  • Source
  • npm
  • Socket score

Version published
Maintainers
5
Created

What is @storybook/channel-postmessage?

The @storybook/channel-postmessage npm package is used within the Storybook ecosystem to enable communication between the Storybook UI and the preview iframe where the components are rendered. It uses the browser's postMessage API to create a channel for sending and receiving messages across different origins securely.

What are @storybook/channel-postmessage's main functionalities?

Creating a channel for communication

This code sample demonstrates how to create a new PostmsgTransport instance and use it to create a communication channel. The 'key' is a unique identifier for the channel.

import { PostmsgTransport } from '@storybook/channel-postmessage';
const transport = new PostmsgTransport({ key: 'postmsg-key' });
const channel = createChannel({ transport });

Sending messages

This code sample shows how to send a message with an event name and associated data through the channel.

channel.emit('eventName', { payload: 'data' });

Receiving messages

This code sample illustrates how to set up a listener for a specific event name and handle the data received through the channel.

channel.on('eventName', (data) => console.log(data));

Other packages similar to @storybook/channel-postmessage

Keywords

FAQs

Package last updated on 27 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc