Adjust height of iframe based on the height of content inside

As the content inside the iframe keeps changing, i want the height of the iframe to adjust accordingly. Looks like there is no way to do it with css alone. I need to set the height of the iframe in javascript on component updates.

I tried the following approach -

<Frame
    {...propsToFrame}
>
   <Resizer />
    <MyContent />
</Frame>

class Resizer extends React.Component {
    static contextTypes = {
        window: PropTypes.any,
        document: PropTypes.any
    }

    adjustHeight = () => {
        if (this.context && this.context.document) {
             // set the frame height to this.context.document.body.scrollHeight
             // but how do i get access to the iframe DOM element
        }
    }

    constructor(props, context) {
        super(props, context)
    }

    componentDidMount() {
        this.adjustHeight()
    }

    componentDidUpdate() {
        this.adjustHeight()
    }

    render() {
        return null
    }
}

I am not able to figure out how to get hold of the iframe DOM element. I tried passing a ref prop to the Frame element, but am not able to reach the DOM iframe element.

[kmaid]

I managed to get something working. I ended up wrapping the frame into another component and using the lifecycle methods of the parent component as the ones provided by the library are fired before the refs are made (which in my opinion is a bug with the library). Here is my code good luck 😃

interface IProps {
  children: React.ReactNode;
}

interface IFrame {
  node: HTMLIFrameElement;
}
export const HeightChangingFrame: React.FunctionComponent<IProps> = ({
  children
}) => {
  const [height, setHeight] = useState(500);
  const iframeRef: React.RefObject<IFrame> = React.createRef();
  const handleResize = (iframe: React.RefObject<IFrame>) => {
    if (
      iframe.current &&
      iframe.current.node.contentDocument &&
      iframe.current.node.contentDocument.body.scrollHeight !== 0
    ) {
      setHeight(iframe.current.node.contentDocument.body.scrollHeight);
    }
  };
  useEffect(() => handleResize(iframeRef), [children]);
  return (
      <Frame
        style={{
          height,
        }}
        ref={iframeRef}
        onLoad={() => handleResize(iframeRef)}
      >{children}</Frame>
  );
};

[cschroeter]

Small refactoring to ensure typescript won’t complain

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>
  );
};