iframe in react

Iframe.js

import React from 'react'

import { createPortal } from 'react-dom'

const Iframe = (props) => {

let iframe_ref = null;

const writeHTML = (frame) => {

if (!frame) {

return 'no frame';

}

iframe_ref = frame;

let doc = frame.contentDocument;

doc.open();

doc.write(props.content);

doc.close();

frame.style.width = '100%';

frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`;

};

return (

<iframe src="about:blank" scrolling="no" frameBorder="0" ref={writeHTML} ></iframe>

);

};

export default Iframe;

Example.js

import React from 'react';

import ReactDOM from 'react-dom';

import Iframe from './Iframe';

function Example() {

return (

<Iframe content='<b>test</b><br><br><br><br><br><br><br><br><br><br><br><u>end</u><br><br><br><br><br><br><br><u>end</u><br><br><br><br><br><br><br><u>end</u>' />

);

}

export default Example;

if (document.getElementById('example')) {

ReactDOM.render(<Example />, document.getElementById('example'));

}