A React component for communicating between a parent window and an iframe.

Downloads in past


6571.2.27 years ago7 years agoMinified + gzip package size for react-iframe-comm in KB


React iFrame communication
A React component for communicating between a parent window and an iframe.


Live Demo:
Or locally run:
npm install
npm run storybook

Then open http://localhost:9009/ in your browser.


The easiest way to use React Iframe Communication is to install it from NPM.
npm install react-iframe-comm --save

At this point you can import react-iframe-comm in your application as follows:
import IframeComm from 'react-iframe-comm';


import React from "react";
import IframeComm from "react-iframe-comm";

const Demo = ({}) => {

    // the html attributes to create the iframe with
    // make sure you use camelCase attribute names
    const attributes = {
        src: "",
        width: "100%",
        height: "175",
        frameBorder: 1, // show frame border just for fun...

    // the postMessage data you want to send to your iframe
    // it will be send after the iframe has loaded
    const postMessageData = "hello iframe";

    // parent received a message from iframe
    const onReceiveMessage = () => {

    // iframe has loaded
    const onReady = () => {

    return (

export default Demo;

Configuration Options

IframeComm.propTypes = {
        Iframe Attributes
        React Supported Attributes
        Note: attributes are camelCase, not all lowercase as usually defined.
    attributes: PropTypes.shape({
        allowFullScreen: PropTypes.oneOfType([
        frameBorder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        name: PropTypes.string,
        scrolling: PropTypes.string,
        sandbox: PropTypes.string,
        srcDoc: PropTypes.string,
        src: PropTypes.string.isRequired,
        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    // Callback function called when iFrame sends the parent window a message.
    handleReceiveMessage: PropTypes.func,

        Callback function called when iframe loads. 
        We're simply listening to the iframe's `window.onload`.
        To ensure communication code in your iframe is totally loaded,
        you can implement a syn-ack TCP-like handshake using `postMessageData` and `handleReceiveMessage`.
    handleReady: PropTypes.func,
        You can pass it anything you want, we'll serialize to a string
        preferablly use a simple string message or an object.
        If you use an object, you need to follow the same naming convention
        in the iframe so you can parse it accordingly.
    postMessageData: PropTypes.any.isRequired,
        Enable use of the browser's built-in structured clone algorithm for serialization
        by settings this to `false`. 
        Default is `true`, using our built in logic for serializing everything to a string.
    serializeMessage: PropTypes.bool,

        Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.
    targetOrigin: PropTypes.string


The MIT License (MIT) - 2017