-
-
Save nguyenvanhaivn/e1496351e8994c9ca8c506306e84bd27 to your computer and use it in GitHub Desktop.
Basic react iframe with onLoad handler
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| }); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment