React Frame Component + IFrame Resizer -- Resizing outside of React preventing re-rendering on resize. Good for wrapping providers (or wrapping an entire react app) in an IFrame to prevent style inheritance. Works with Create React App.

smart-react-frame-component.jsx

import React, { useEffect } from "react";
import Frame, { FrameContextConsumer } from "react-frame-component";
import { iframeResize } from "iframe-resizer";
import iFrameResizeContentWindowScript from "!raw-loader!iframe-resizer/js/iframeResizer.contentWindow.min.js"; // eslint-disable-line

const SmartFrame = ({ children, ...props }) => {
	const ref = React.createRef();

	// Component did mount
	useEffect(() => {
		iframeResize(
			{
				checkOrigin: false
			},
			ref.current.node
		);
	}, []);

	return (
		<Frame ref={ref} {...props}>
			<FrameContextConsumer>
				{frameProps => {
					const { document } = frameProps;
					const script = document.createElement("script");
					script.type = "text/javascript";
					script.innerHTML = iFrameResizeContentWindowScript;
					document.body.appendChild(script);

					return children(frameProps);
				}}
			</FrameContextConsumer>
		</Frame>
	);
};

export default SmartFrame;