Skip to content

Instantly share code, notes, and snippets.

@msmfsd
Last active July 15, 2020 11:48
Show Gist options
  • Save msmfsd/dabc106be9b4dd8e653109509c218335 to your computer and use it in GitHub Desktop.
Save msmfsd/dabc106be9b4dd8e653109509c218335 to your computer and use it in GitHub Desktop.
React iframe component
/*
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
@smokinjoe
Copy link

@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'.

@albanx
Copy link

albanx commented May 4, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment