Skip to content

Instantly share code, notes, and snippets.

@iest

iest/BzIframe.js

Created January 7, 2015 16:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iest/3b571a6ddcdd9ddab3cf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iest/3b571a6ddcdd9ddab3cf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iest created this gist Jan 7, 2015.
    21 changes: 21 additions & 0 deletions BzIframe.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    '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;
    31 changes: 31 additions & 0 deletions Example use.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    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
    });
    }
    });