React iframe component that listens to messages from the embedded document

ReactiveIframe.js

import React from 'react';
import PropTypes from 'prop-types';

export default class ReactiveIframe extends React.Component {
  static propTypes = {
    origin: PropTypes.string.isRequired,
    src: PropTypes.string.isRequired,
    onMessage: PropTypes.func.isRequired,
    title: PropTypes.string,
    frameBorder: PropTypes.number
  };

  static defaultProps = {
    title: 'reactiveIframe',
    frameBorder: 0
  };

  constructor(props) {
    super(props);
    this.handleMessage = this.handleMessage.bind(this);
  }

  componentDidMount = () => window.addEventListener('message', this.handleMessage);

  componentWillUnmount = () => window.removeEventListener('message', this.handleMessage);

  handleMessage = (messageEvent) => !~messageEvent.origin.indexOf(this.props.origin) ? null : this.props.onMessage(messageEvent.data);

  render = () => <iframe title={this.props.title} src={this.props.src} frameBorder={this.props.frameBorder}/>
}