p5.js-web-editor/client/modules/IDE/components/PreviewFrame.js

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';

class PreviewFrame extends React.Component {

  componentDidMount() {
    if (this.props.isPlaying) {
      this.renderFrameContents();
    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.isPlaying !== prevProps.isPlaying) {
      if (this.props.isPlaying) {
        this.renderSketch();
      } else {
        this.clearPreview();
      }
    }

    if (this.props.isPlaying && this.props.content !== prevProps.content) {
      this.renderSketch();
    }
  }

  componentWillUnmount() {
    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
  }

  clearPreview() {
    const doc = ReactDOM.findDOMNode(this).contentDocument;
    doc.write('');
    doc.close();
  }

  renderSketch() {
    const doc = ReactDOM.findDOMNode(this).contentDocument;
    this.clearPreview();
    ReactDOM.render(this.props.head, doc.head);
    const p5Script = doc.createElement('script');
    p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
    doc.body.appendChild(p5Script);

    const sketchScript = doc.createElement('script');
    sketchScript.textContent = this.props.content;
    doc.body.appendChild(sketchScript);
  }

  renderFrameContents() {
    const doc = ReactDOM.findDOMNode(this).contentDocument;
    if (doc.readyState === 'complete') {
      this.renderSketch();
    } else {
      setTimeout(this.renderFrameContents, 0);
    }
  }

  render() {
    return (
      <iframe
        className="preview-frame"
        frameBorder="0"
        sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
        title="sketch output"
      ></iframe>
    );
  }
}

PreviewFrame.propTypes = {
  isPlaying: PropTypes.bool.isRequired,
  head: PropTypes.object.isRequired,
  content: PropTypes.string.isRequired
};

export default PreviewFrame;