iframe-resizer-react Add `ref` so we can access the `<iframe>` used

When looking at the forwardRef prop I initially expected it to work like React.forwardRef() & the "Forwarding Refs" docs mentions - by being able to access all methods on a <iframe> element (i.e. the HTMLIFrameElement interface) so I could do things like forwardRef.current.contentWindow.location.reload() for instance but was unable to.

It appears that the only methods on forwardRef.current are resize, sendMessage, and moveToAnchor which are exposed in the useImperativeHandle hook here:

https://github.com/davidjbradshaw/iframe-resizer-react/blob/03eea291dbde2ad29c72868c1249f739629a52d9/src/index.jsx#L33-L40

The iframeRef is passed into the <iframe> element here & that's what I would like to be able to get access to: https://github.com/davidjbradshaw/iframe-resizer-react/blob/03eea291dbde2ad29c72868c1249f739629a52d9/src/index.jsx#L42

However it is not accessible to parent components. Could a ref passed into <IFrameResizer /> get forwarded to the <iframe> element like the "Forwarding Refs" docs outlines? I don't think any changes to the forwardRef prop or the implementation of the useImperativeHandle hook would be needed. This would be really helpful! Thanks for the great library! Also, here's an annotated screenshot that might help:

ScreenShot 2020-09-18 at 09 32 00

Sep 18 '20 16:09 EvanLovely

I need to do some imperative actions (e.g: update style) on the iframe and AFAIK there's no way to do that now, so being able to pass a ref to this component would be very useful.

Nov 06 '20 18:11 giovannibenussi

Hi *,

I think this is an important feature and I also came along a use case where I need to access the underlying iframe element directly. From a usage point of view, using React.forwardRef would not be too much different from using the forwardRef Prop as it is done right now. Although, I do think that React.forwardRef would be somewhat more ideomatic.

The core problem is, that iframe can only take a single ref. So we cannot just pass it the ref from outside as well.

I submitted a PR where I just added another method that allows accessing the iframe element from the outside. #53 I also commented on some possible refactorings. However, I chose this simple solution for now to guarantee backwards compatibility.

Suggestions are very much appreciated :)