react iframe height
import React, { useState, useEffect, useCallback, RefObject } from "react";
import Frame from "react-frame-component";
interface FrameRef extends Frame {
node: HTMLIFrameElement;
}
export const IFrame: React.FC = (props) => {
const { children } = props;
const [height, setHeight] = useState(500);
const iframeRef = React.createRef<FrameRef>();
const handleResize = useCallback((iframe: RefObject<FrameRef>) => {
const height = iframe.current?.node.contentDocument?.body.scrollHeight ?? 0;
if (height !== 0) {
setHeight(height);
}
}, []);
useEffect(() => handleResize(iframeRef), [handleResize, iframeRef]);
return (
<Frame
ref={iframeRef}
style={{
height,
}}
onLoad={() => handleResize(iframeRef)}
>
{children}
</Frame>
);
};