react-inline-frame

React iframe component

Usage no npm install needed!

<script type="module">
  import reactInlineFrame from 'https://cdn.skypack.dev/react-inline-frame';
</script>

README

react-inline-frame

npm version

React iframe component

Installation

npm install react-inline-frame

Usage

import React from "react";
import ReactIframe from "react-inline-frame";

class ReactIframeDemo extends React.Component {
  onIframeLoad = event => {
    console.log("onIframeLoad");

    this.iframe.postMessage({
      type: "greeting",
      content: ["Hello", "Bonjour", "你好"]
    });
  };

  onIframeMessage = (message, event) => {
    console.log("onIframeMessage", message);
  };

  render() {
    return (
      <ReactIframe
        className="iframe-demo"
        title="iframe-demo"
        src="./embed.html"
        ref={el => {
          this.iframe = el;
        }}
        onLoad={this.onIframeLoad}
        onMessage={this.onIframeMessage}
      />
    );
  }
}

License

MIT