Dynamically Resizing Inline Frame (React)

DynamicInlineFrame.jsx

// WARNING: CAN ONLY BE USED FOR SAME-ORIGIN URLS
//          THIS IS NOT CONFIGURED FOR CROSS-ORIGIN DOMAINS

import React, { useEffect } from 'react';
import onResize from './onResize';
import iFrameResizer from './iFrameResizer';

const DynamicInlineFrame = ({ src, title }) => {
  // create callback to be called on an interval until height is actual height of iframe content
  const resizeCallback = () => iFrameResizer({ triggerInterval: true });
  // trigger the resizing interval on component mount
  useEffect(() => iFrameResizer({ triggerInterval: true, cb: resizeCallback }));
  // trigger resizing on window 'resize' events
  onResize(iFrameResizer());

  return (
    <iframe
      title={title}
      src={src}
      id="iFrameForStaticPage"
      allowFullScreen
      width="100%"
      height="100%"
      scrolling="no"
    />
  );
};

export default DynamicInlineFrame;

iFrameResizer.js

export default ({ triggerInterval, cb } = {}) => {
  let resetCode;
  // triggerInterval && console.log('Resize Triggered');
  let height = 0;
  const resizeFrame = () => {
    // height && console.log('HEIGHT', height);
    const { iFrameForStaticPage } = global;
    const iFrameDocumentEl = iFrameForStaticPage.contentWindow.document.documentElement;
    // wait for the iframe document element to load
    if (iFrameDocumentEl) {
      // if setInterval was triggered
      if (triggerInterval) {
        // height has remained unchanged since last time it was updated
        const heightIsStable = height === iFrameDocumentEl.offsetHeight;
        // height has been updated from initial value of 0
        const heightWasSet = height > 0;
        // if height is at the final correct height
        if (heightWasSet && heightIsStable) {
          clearInterval(resetCode);
          // add click event listener to listen for UI changes that might change the height of the page
          iFrameForStaticPage.contentWindow.addEventListener('click', cb);
        }
        // track the height (used for setInterval functionality)
        height = iFrameDocumentEl.offsetHeight;
      }

      // set the height of the iframe
      iFrameForStaticPage.style.height = `${iFrameDocumentEl.offsetHeight}px`;
    }
  };
  // if not called with triggerInterval option, return the resizing function
  if (!triggerInterval) return resizeFrame;
  // trigger setInterval and keep track of the reset code
  resetCode = setInterval(resizeFrame, 100);
  // if callback function is provided, remove click event listener
  if (cb) return () => global.iFrameForStaticPage.contentWindow.removeEventListener('click', cb);
};

onResize.js

import { useEffect } from 'react';

// Hook
export default function useWindowSize(cb) {
  useEffect(() => {
    window.addEventListener('resize', cb);
    return () => window.removeEventListener('resize', cb);
  });
}