Skip to content

Instantly share code, notes, and snippets.

@iest
Created January 7, 2015 16:43
Show Gist options
  • Star 35 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save iest/3b571a6ddcdd9ddab3cf to your computer and use it in GitHub Desktop.
Save iest/3b571a6ddcdd9ddab3cf to your computer and use it in GitHub Desktop.
Basic react iframe with onLoad handler
'use strict';
var React = require('react');
var BzIframe = React.createClass({
propTypes: {
src: React.PropTypes.string.isRequired,
onLoad: React.PropTypes.func
},
componentDidMount: function() {
this.refs.iframe.getDOMNode().addEventListener('load', this.props.onLoad);
},
render: function() {
return <iframe ref="iframe" {...this.props}/>;
}
});
module.exports = BzIframe;
var Example = React.createClass({
getInitialState: function() {
return {
isLoading: true
};
},
render: function() {
var classes = cx({
'is-loading': this.state.isLoading // Hide `is-loading` with CSS
});
return (
{this.state.isLoading ?
<p>Loading... A spinner would probably be nice here</p>
:null
}
<BzIframe className={classes} onLoad={this._iframeLoaded} src="http://link-to-somewhere"/>
</div>
</DocumentTitle>
);
},
_iframeLoaded: function() {
this.setState({
isLoading: false
});
}
});
@kevalbhatt
Copy link

What if Ifram failed to load the URL?

@veeramarni
Copy link

I would like to see how we can handle when the url don't resolve or fails to load?

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