embedly with react.js

embed.jsx

import React, {Component} from 'react'
import { connect } from 'react-redux'

// one-time init of the embedly platform.js, hidden behind 
// typeof check not to blow up on server-side render
if (typeof window !== 'undefined') {
  let init_embedly = function(w,d){
    var id='embedly-platform', n = 'script';
    if (!d.getElementById(id)){
      w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};
      var e = d.createElement(n); e.id = id; e.async=1;
      e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';
      var s = d.getElementsByTagName(n)[0];
      s.parentNode.insertBefore(e, s);
    }
  }
  init_embedly(window,document)
}

class Embed extends Component {
  constructor(props){
    super(props)
    this.embed = this.embed.bind(this)
  }
  embed(el){
    // invoke embedly from the ref callback, which
    // isn't called back on server-side render so
    // we're all good.
    if (el) {
      embedly('card',el)
    }
  }
  render(){
    let { data: { url, description }, embedlyAppId } = this.props
    return (
      <div>
        <blockquote
          data-card-key={embedlyAppId}
          data-card-controls="0"
          data-card-recommend="0"
          ref={this.embed}
        >
          <h4>
            <a href={url}>{description}</a>
          </h4>
        </blockquote>
      </div>
    )
  }
}

// i'm loading the embedly app id from redux state
// because i have some complicated business cases that
// require multiple embedly accounts
const mapStateToProps = (
  { config: { embedlyAppId } } = {} } = {}
) => ({
  embedlyAppId
})

export default connect(mapStateToProps, {})(Embed)