# iframe-script-container

> A react script tag container

Latest version **1.0.5** (published 2018-06-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install iframe-script-container
pnpm add iframe-script-container
yarn add iframe-script-container
bun add iframe-script-container
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2018-06-21 |
| First published | 2018-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 321.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | WENG Zhang |
| Maintainers | zweng |
| Keywords | React, script tag, iframe, linkedin insider plugin, plugin |

## Links

- npm: https://www.npmjs.com/package/iframe-script-container
- Repository: https://github.com/leowz/iframe-script-container
- npm.io page: https://npm.io/package/iframe-script-container

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.1
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^0.32.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2018-06-21
- 1.0.4 — 2018-06-21
- 1.0.3 — 2018-06-21
- 1.0.2 — 2018-06-19
- 1.0.1 — 2018-06-19

## README

# 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](https://brave.com/).

- [Install](#install)
- [Example](#example)
- [Author](#author)
- [License](#license)


## Install

**Install with [npm](https://www.npmjs.com/)**:

```sh
npm i iframe-script-container
```

**Install with [yarn](https://yarnpkg.com/en/)**:

```sh
yarn add iframe-script-container
```

## Example

**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

```js
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.


```js
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:*

![demo](img/linkedinPlugin.gif)

## Author

**[Leo weng](https://github.com/leowz)**

## License

Copyright © 2018 **[Leo weng](https://github.com/leowz)**
Released under the MIT license.

---
_Source: https://npm.io/package/iframe-script-container · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._