iframe-script-container
v1.0.5
Published
A react script tag container
Downloads
22
Maintainers
zwengReadme
iframe-script-container
A React component that can execute script tag normally and safely in React app.
I came up with this component when working on a project that need to integrate linked insider plugin into a react app.
However, after I figured out that the script tag wil not execute in react app, I decided to make a container like thing that can execute script in react correctly.
The idea of this component is to execute script inside a container like iframe, so that we can execute it without messing our react app. See linkedin plugin example below.
PS : This component is tested not working on browser brave.
Install
Install with npm:
npm i iframe-script-containerInstall with yarn:
yarn add iframe-script-containerExample
Props:
- docString: HTML in a string containing the script or anything that you want to execute in the iframe container.
- width: width of the container
- height: height of the container
- scolling: if enables scrolling in the iframe
import React, { Component } from 'react';
import IframeContainer from 'iframe-script-container';
class Demo extends Component {
render() {
const docString = "<body><h1>Add HTML to docString, Please!</h1></body>";
return (
<IframeContainer
docString={docString}
/>
);
}
}script example
This is an example of running the linked insider plugin in the script container.
import React, { Component } from 'react';
import IframeContainer from 'iframe-script-container';
class Demo extends Component {
render() {
const str = '<body><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/CompanyInsider" data-id="1337"></script></body>';
return (
<div className="App">
<IframeContainer
width="100%"
height="300px"
docString={str}
/>
</div>
);
}
}result:
Author
License
Copyright © 2018 Leo weng Released under the MIT license.