Last active
May 10, 2016 13:35
-
-
Save worldsayshi/78d638b747df93bac973f0a37c70a7f3 to your computer and use it in GitHub Desktop.
Reactive iframe with React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| /* | |
| Reactive iframe - Usage: | |
| <Iframe html={myPlainTextHtml} /> | |
| Or if using the safer alternative: | |
| <Iframe> | |
| <div>hello world</div> | |
| </Iframe> | |
| Inspired by and reworked from: | |
| https://developer.zendesk.com/blog/rendering-to-iframes-in-react | |
| Disclaimer: Not as well tested as the example from link above. | |
| */ | |
| export default class IFrame extends React.Component { | |
| render () { | |
| return <iframe ref={(_iframe) => this.renderFrameContents (_iframe);} />; | |
| } | |
| renderFrameContents (_iframe) { | |
| let doc = _iframe.contentDocument; | |
| /* Somewhat unsafe html insertion */ | |
| doc.open(); | |
| doc.write(this.props.html); | |
| doc.close(); | |
| /* | |
| Safer alternative: | |
| React.renderComponent(this.props.children, doc.body); | |
| */ | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment