{"id":14990240,"url":"https://github.com/seb-oss/magic-iframe","last_synced_at":"2025-04-12T02:06:29.405Z","repository":{"id":38175214,"uuid":"235035552","full_name":"seb-oss/magic-iframe","owner":"seb-oss","description":"A magical iframe component ","archived":false,"fork":false,"pushed_at":"2023-07-18T21:23:49.000Z","size":2561,"stargazers_count":13,"open_issues_count":19,"forks_count":5,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-12T02:06:21.710Z","etag":null,"topics":["element-query","iframe","resize","responsive","stencil","webcomponent"],"latest_commit_sha":null,"homepage":"https://sebgroup.github.io/magic-iframe/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seb-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-20T06:41:27.000Z","updated_at":"2024-11-09T10:50:05.000Z","dependencies_parsed_at":"2024-06-03T15:09:14.117Z","dependency_job_id":"262142cf-3e7d-4019-8d82-ec72798a91b2","html_url":"https://github.com/seb-oss/magic-iframe","commit_stats":null,"previous_names":["seb-oss/magic-iframe","sebgroup/magic-iframe"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Fmagic-iframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Fmagic-iframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Fmagic-iframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seb-oss%2Fmagic-iframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seb-oss","download_url":"https://codeload.github.com/seb-oss/magic-iframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-query","iframe","resize","responsive","stencil","webcomponent"],"created_at":"2024-09-24T14:19:45.942Z","updated_at":"2025-04-12T02:06:29.379Z","avatar_url":"https://github.com/seb-oss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SEB Magic Iframe\n\n![CI](https://github.com/sebgroup/magic-iframe/workflows/CI/badge.svg?branch=master)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d)\n\nSEB 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/).\n\n# Demo and example\nSee live demo here: https://sebgroup.github.io/magic-iframe/\n\n# Usage\n\nDepending on the framework you're using there are different ways this component can be loaded, the most common ones being:\n\n- Script file from CDN\n- Local script (downloaded with npm)\n- Using import\n\nOnce the script is added you just use the `\u003cseb-magic-iframe\u003e` element tag like any other element (more info below).\n\n## With script tag\n\n- Put these two script tags in the head of your index.html document:\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.esm.js\"\u003e\u003c/script\u003e\n\u003cscript nomodule src=\"https://unpkg.com/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.js\"\u003e\u003c/script\u003e\n```\nThe 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.\nThis 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`.\n\n\n## With npm\n- Run `npm install @sebgroup/magic-iframe --save`\n- 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:\n ```html\n \u003cscript type=\"module\" src=\"node_modules/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.esm.js\"\u003e\u003c/script\u003e\n \u003cscript nomodule src=\"node_modules/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.js\"\u003e\u003c/script\u003e\n ```\n\n## In a stencil app\n- Run `npm install @sebgroup/magic-iframe --save`\n- Import package `import @sebgroup/magic-iframe;`\n\n\n## In template, JSX, html etc.\nOnce the script has been added you're free to use the element anywhere in your template, JSX, html etc. like this:\n\n### Basic\n\n```html\n\u003cseb-magic-iframe source=\"/foo/bar/index.html\"\u003e\u003c/seb-magic-iframe\u003e\n```\n\n### With options as attributes\n\n```html\n\u003cseb-magic-iframe source=\"/foo/bar/index.html\"\n                  styles=\"body { background: white; }\"\n                  autoResize=\"false\"\n                  resizeDebounceMillis=\"50\"\u003e\n\u003c/seb-magic-iframe\u003e\n```\n\n### With custom loading indicator\n```html\n\u003cseb-magic-iframe source=\"/foo/bar/index.html\"\u003e\n  \u003cdiv class=\"skeleton-loader\"\u003e\u003c/div\u003e \u003c!-- replace with your own code --\u003e\n\u003c/seb-magic-iframe\u003e\n```\n\n## Options\nFor more options see [component documentation](/src/components/seb-magic-iframe/readme.md).\n\n## Local development\n\nTo run this project locally, clone the repository (or make a fork):\n\n```bash\ngit clone https://github.com/sebgroup/magic-iframe.git\n```\n\nInstall dependencies and start app:\n\n```bash\nnpm install\nnpm start\n```\n\nTo build the component for production, run:\n\n```bash\nnpm run build\n```\n\nTo run the unit tests for the components, run:\n\n```bash\nnpm test\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-oss%2Fmagic-iframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseb-oss%2Fmagic-iframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-oss%2Fmagic-iframe/lists"}