React iframe component

Iframe.js

/*
INIT: ensure Babel/Eslint/Flow is configured for ES Class Fields & Static Properties
JSX USAGE: <Iframe src='http://web.site' onLoad={myOnloadFunction}/>
*/
import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'

class Iframe extends Component {

  static propTypes: Object = {
    src: PropTypes.string.isRequired,
    onLoad: PropTypes.func,
  }

  componentDidMount () {
    let iframe = ReactDOM.findDOMNode(this.refs.iframe)
    iframe.addEventListener('load', this.props.onLoad);
  }

  render () {
    const iframeStyle = {
      width: '100%',
      height: '100%',
      border: '0',
      position: 'absolute',
    }

    return (
      <iframe
        ref="iframe"
        {...this.props}
        frameBorder={'0'}
        width={'100%'}
        height={'100%'}
        style={iframeStyle}
      />
    )
  }

}

export default Iframe

Hi Morris, thank you for your gist.
Would you mind telling me what does the load function do?

Thanks in advance.

@srdjanRakic it lets you pass in a callback that gets called when the content in the iframe is loaded.

Shouldn't this implement,

shouldComponentUpdate () {
 return false;
}

... per this post ?

What about removing listener when unmounting the component?

componentDidMount () {
  let iframe = ReactDOM.findDOMNode(this.refs.iframe)
  // iframe.addEventListener('load', this.props.onLoad); // BUG this fires twice in Chrome
  iframe.onload = () => this.props.onLoad // this event fires once
}

componentWillUnmount() {
  let iframe = ReactDOM.findDOMNode(this.refs.iframe)
  //iframe.removeEventListener('load');
  iframe.onload = null // destroy event handler
}

@momendo unfortunately with typescript I'm constantly getting this error with your solution:

[dev:build]         TS2339: Property 'load' does not exist on type 'Element | Text'.
[dev:build]       Property 'load' does not exist on type 'Element'.

Iframe in react has a problem, if you need to destroy it, for example because you load some js inside it, and want to load a new JS, you cannot do that with react.