TypeScript iframe-resizer-react resize method not working

Question

Seems like iframeResizerRef.current is defined but iframeResizerRef.current.iFrameResizer isn't?

I am using iframe-resizer-react to load an iframe.

import IframeResizer, { IFrameComponent } from "iframe-resizer-react";
...
const iframeResizerRef = useRef<IFrameComponent>(null);
...

<IframeResizer
  forwardRef={iframeResizerRef}
  src="https://myexample.com"
  style={{ minWidth: "100%" }}
  heightCalculationMethod="lowestElement"
  enablePublicMethods
  checkOrigin={false}
  frameBorder="0"
/>

I am posting an event to the parent to notify that there is a resize happening. Seems like iframeResizerRef.current is defined but iframeResizerRef.current.iFrameResizer isn't? heightCalculationMethod="lowestElement" doesn't seem to work when there's a dismissable error message, my iframe stays the same height after dismissing the error and not recalculating so i'm trying to resize it.

 if (data.message === "event.resize") {
   if (iframeResizerRef.current && iframeResizerRef.current.iFrameResizer) {
     iframeResizerRef.current.iFrameResizer.resize();
   }
  }

Any idea what am I missing here?

EDIT:

When I log iframeResizerRef.current it returns {moveToAnchor: f, resize: f, sendMessage, f} so tried to type current as below:

if (iframeResizerRef.current) {
  const iFrameResizer =
    iframeResizerRef.current as unknown as IframeResizer.IFrameObject;

  if (iFrameResizer) {
    iFrameResizer.resize();
  }
}

The resize doesn't seem to happen at all.

Answer 1

This is now fixed in v5 of iframe-resizer.