// HeightObserver.tsx

import * as React from "react";
import {useEffect, useRef} from "react";

interface Props {
    className?: string;
    onChangeHeight: (height: number) => void;
}

export const HeightObserver: React.FunctionComponent<Props> = (props) => {
    const element = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const resizeObserver = new ResizeObserver((entries) =>
            entries.forEach(
                (entry) => props.onChangeHeight(entry.contentRect.height)
            )
        );
        resizeObserver.observe(element.current!);
    }, []);

    return <div
        className={props.className}
        ref={element}
    >
        {props.children}
    </div>;
};

/// Usage:
    <HeightObserver onChangeHeight={(parent as any).adjustIframeContentHeight}>
        ...page content...
    </HeightObserver>

/// Iframe definition
<iframe
    src="..."
    frameborder="0"
    id="some-iframe"
></iframe>
<script>
    window.adjustIframeContentHeight = function(height) {
        document.getElementById("some-iframe").style.height = height + "px";
    }
</script>