Making iframe-resizer work in React 0.15

import { iframeResizer } from 'iframe-resizer'

export class Main extends Component {
  componentDidMount () {
    iframeResizer({log:true}, this.refs.iframe)
  }

  render () {
    return (
      <div>
        <iframe ref='iframe' src="some-page.html" width='100%'/>
      </div>
    )
  }
}

What am I missing? I can see the logs coming through and it seemingly is applying the resizer onto the iframe element, but it actually never triggers any resize events if the content height changes.

[iFrameSizer][Host page: iFrameResizer0] [iFrame.onload] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll) 
[iFrameSizer][Host page: document] Trigger event: Visiblity change
console.js:26 [iFrameSizer][Host page: window] Trigger event: focus

Likewise, resizedCallback never gets triggered either.

[zeroasterisk]

thanks @davidjbradshaw

updated & renamed (npm naming conflict): https://github.com/zeroasterisk/react-iframe-resizer-super/ https://zeroasterisk.github.io/react-iframe-resizer-super/

[AllanPooley]

Hey gang,

Many thanks @davidjbradshaw for iframe-resizer, and @zeroasterisk for your react adaptation.

React frontend, pulling through complex plugin modified forms from a separate WordPress website (Headless WordPress website).

Thought I’d share my dead simple example for anyone else crawling the web for a react application of iframe-resizer.

On my react front-end:

Installation yarn add react-iframe-resizer-super iframe-resizer

import React from 'react';
import IframeResizer from 'react-iframe-resizer-super';

export const DynamicIFrame = props => {
  const { src } = props;
  const iframeResizerOptions = {
    log: true,
    // autoResize: true,
    checkOrigin: false,
    // resizeFrom: 'parent',
    // heightCalculationMethod: 'max',
    // initCallback: () => { console.log('ready!'); },
    // resizedCallback: () => { console.log('resized!'); },
  };
  return (
    <IframeResizer src={src} iframeResizerOptions={iframeResizerOptions} />
  );
};

Inside the project that is the source of my iFrame (WordPress): Include iframeResizer.contentWindow.min.js