Portals Rendering in IFRAME (using React Hooks)

App.md

React Portals Rendering in IFRAME

(using React Hooks)

index.html

<!-- Our App will reside here -->
<div id="app"></div>
<br />
<iframe id="myIframe" src="about:blank"></iframe>
<script>
   var aDoc = document.getElementById("myIframe").contentWindow.document;
   aDoc.open("text/html", "replace");
   aDoc.write("<div id='result'></div>");
   aDoc.write("<link type='text/css' rel='stylesheet' href='https://codepen.io/kcak11/pen/MWwBvEB.css?ts=" + new Date().getTime() + "'/>");
   aDoc.close();
</script>

portals-rendering-in-iframe-using-hooks.markdown

Portals Rendering in IFRAME (using hooks)

This pen showcases an example of rendering content across IFRAME(s) via the React Portals mechanism.

This specific example uses the "React Hooks" instead of the regular ES6 classes.

A Pen by K.C.Ashish Kumar on CodePen.

License.

portals-rendering-in-iframe-using-react-hooks.markdown

Portals Rendering in IFRAME (using React Hooks)

This pen showcases an example of rendering content across IFRAME(s) via the React Portals mechanism.

This specific example uses the "React Hooks" instead of the regular ES6 classes.

A Pen by K.C.Ashish Kumar on CodePen.

License.

script.babel

"use strict";

const { useState, useCallback, Fragment } = React;

const SomeApp = function (props) {
   return (
      <Fragment>
         <h2>Content rendered via Portal from outer frame</h2>
         <button onClick={props.clearContentsHandler}>Clear Contents</button>
      </Fragment>
   );
};

const SomeAppRenderer = function (props) {
   const doc = document.getElementById("myIframe").contentWindow.document;
   return ReactDOM.createPortal(
      <SomeApp clearContentsHandler={props.clearContentsHandler} />,
      doc.getElementById("result")
   );
};

const MyApp = function (props) {
   const [buttonClicked, setButtonClicked] = useState(false);
   const doIframeDisplay = useCallback((e) => {
      setButtonClicked(true);
   });
   const clearContents = useCallback((e) => {
      setButtonClicked(false);
   });
   return (
      <div>
         <h1>React App in outer frame</h1>
         <button onClick={doIframeDisplay} disabled={buttonClicked}>
            Click to render contents in Iframe
         </button>
         {buttonClicked ? (
            <SomeAppRenderer clearContentsHandler={clearContents} />
         ) : (
            ""
         )}
      </div>
   );
};

/* The React app gets mounted here */
ReactDOM.render(<MyApp />, document.getElementById("app"));

scripts

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

style.less

@foregroundColor: #1064ea;

body {
   font-family: Verdana;
   color: @foregroundColor;
}

#app,
iframe {
   padding: 10px;
   border: 2px solid @foregroundColor;
   width: 500px;
   height: 200px;
}

iframe {
   border-style: dashed;
}

button {
   color: #fff;
   background-color: @foregroundColor;
   font-weight: bold;
   border-radius: 100px;
   border: 2px solid #000;
   box-sizing: border-box;
   box-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000,
      0 0 7px #fff inset, 0 0 7px #fff inset, 0 0 7px #fff inset,
      0 0 7px #fff inset;
   padding: 5px;
   width: 250px;
   height: 40px;
   margin: 10px;
   outline: none;
   cursor: pointer;
   &:hover {
      background-color: #000;
   }
   &[disabled] {
      background-color: @foregroundColor;
      opacity: 0.25;
      cursor: not-allowed;
   }
}