1import React, { useState, useEffect, useCallback, RefObject } from "react";
2import Frame from "react-frame-component";
3
4interface FrameRef extends Frame {
5  node: HTMLIFrameElement;
6}
7
8export const IFrame: React.FC = (props) => {
9  const { children } = props;
10  const [height, setHeight] = useState(500);
11  const iframeRef = React.createRef<FrameRef>();
12
13  const handleResize = useCallback((iframe: RefObject<FrameRef>) => {
14    const height = iframe.current?.node.contentDocument?.body.scrollHeight ?? 0;
15    if (height !== 0) {
16      setHeight(height);
17    }
18  }, []);
19
20  useEffect(() => handleResize(iframeRef), [handleResize, iframeRef]);
21
22  return (
23    <Frame
24      ref={iframeRef}
25      style={{
26        height,
27      }}
28      onLoad={() => handleResize(iframeRef)}
29    >
30      {children}
31    </Frame>
32  );
33};