https://github.com/seb-oss/magic-iframe
A magical iframe component
https://github.com/seb-oss/magic-iframe
element-query iframe resize responsive stencil webcomponent
Last synced: 6 months ago
JSON representation
A magical iframe component
- Host: GitHub
- URL: https://github.com/seb-oss/magic-iframe
- Owner: seb-oss
- License: apache-2.0
- Created: 2020-01-20T06:41:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T21:23:49.000Z (about 2 years ago)
- Last Synced: 2025-04-12T02:06:21.710Z (6 months ago)
- Topics: element-query, iframe, resize, responsive, stencil, webcomponent
- Language: TypeScript
- Homepage: https://sebgroup.github.io/magic-iframe/
- Size: 2.44 MB
- Stars: 13
- Watchers: 16
- Forks: 5
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SEB Magic Iframe
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
SEB Magic Iframe adds auto resize and responsiveness to iframes as well as the ability to listen to events, override styles and show custom loaders when the iframe is loading content (requires that the content is loaded from the same domain). Built as generic web component with [Stencil](https://stenciljs.com/).
# Demo and example
See live demo here: https://sebgroup.github.io/magic-iframe/
# Usage
Depending on the framework you're using there are different ways this component can be loaded, the most common ones being:
- Script file from CDN
- Local script (downloaded with npm)
- Using import
Once the script is added you just use the `` element tag like any other element (more info below).
## With script tag
- Put these two script tags in the head of your index.html document:
```html
```
The first script will be used by modern browsers supporting modules, the second one is only needed if you need to support older browser like IE etc. that don't support loading modules.
This will load the latest version of the component if you want to use a specific version just add `@{version}` to the package name in the url, e.g. `https://unpkg.com/@sebgroup/magic-iframe@1.0.0/dist/magic-iframe/magic-iframe.js` to load version `1.0.0`.
## With npm
- Run `npm install @sebgroup/magic-iframe --save`
- Add the scripts from the node_modules folder to your index.html document (same as above), but instead of loading from `unpkg` you reference the same files now located in the node_modules folder e.g:
```html
```
## In a stencil app
- Run `npm install @sebgroup/magic-iframe --save`
- Import package `import @sebgroup/magic-iframe;`
## In template, JSX, html etc.
Once the script has been added you're free to use the element anywhere in your template, JSX, html etc. like this:
### Basic
```html
```
### With options as attributes
```html
```
### With custom loading indicator
```html
```
## Options
For more options see [component documentation](/src/components/seb-magic-iframe/readme.md).
## Local development
To run this project locally, clone the repository (or make a fork):
```bash
git clone https://github.com/sebgroup/magic-iframe.git
```
Install dependencies and start app:
```bash
npm install
npm start
```
To build the component for production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
npm test
```