stevenkaspar/CustomIframe.jsx

## CustomIframe.jsx
/**
 * This has a specific use case for writing to the contentDocument allowing for a separated scope
 *
 * There are probably other ways to do this with ShadowDom but this works well for my purposes
 *
 * USAGE:
 *
 * <CustomIframe html={<head><title>Doc Title</title></head><body>Hello React User</body>} />
 *
 */

import React, { Component } from 'react'

export default class CustomIframe extends Component {

  constructor() {
    super()

    this.iframe_ref = null

    this.writeHTML = this.writeHTML.bind(this)
  }

  writeHTML(frame){

    if(!frame) {
      return
    }

    this.iframe_ref = frame

    let doc = frame.contentDocument

    doc.open()
    doc.write(this.props.html)
    doc.close()

    frame.style.width = '100%'
    frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`
  }

  render(){
    return (
      <iframe src='about:blank' scrolling='no' frameBorder='0' ref={this.writeHTML}></iframe>
    )
  }
}
	/**
	* This has a specific use case for writing to the contentDocument allowing for a separated scope
	*
	* There are probably other ways to do this with ShadowDom but this works well for my purposes
	*
	* USAGE:
	*
	* <CustomIframe html={<head><title>Doc Title</title></head><body>Hello React User</body>} />
	*
	*/

	import React, { Component } from 'react'

	export default class CustomIframe extends Component {

	constructor() {
	super()

	this.iframe_ref = null

	this.writeHTML = this.writeHTML.bind(this)
	}

	writeHTML(frame){

	if(!frame) {
	return
	}

	this.iframe_ref = frame

	let doc = frame.contentDocument

	doc.open()
	doc.write(this.props.html)
	doc.close()

	frame.style.width = '100%'
	frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`
	}

	render(){
	return (
	<iframe src='about:blank' scrolling='no' frameBorder='0' ref={this.writeHTML}></iframe>
	)
	}
	}