{"id":13755459,"url":"https://github.com/trendmicro-frontend/react-iframe","last_synced_at":"2025-10-28T15:48:30.121Z","repository":{"id":57148291,"uuid":"102460363","full_name":"trendmicro-frontend/react-iframe","owner":"trendmicro-frontend","description":"React Iframe component","archived":false,"fork":false,"pushed_at":"2023-09-22T14:09:56.000Z","size":1442,"stargazers_count":13,"open_issues_count":1,"forks_count":1,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-12-12T04:13:42.323Z","etag":null,"topics":["iframe","mutationobserver","polling","react"],"latest_commit_sha":null,"homepage":"https://trendmicro-frontend.github.io/react-iframe","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trendmicro-frontend.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}},"created_at":"2017-09-05T09:13:32.000Z","updated_at":"2024-01-03T12:22:49.000Z","dependencies_parsed_at":"2024-01-17T15:04:31.896Z","dependency_job_id":"6ad4ec53-7d76-402e-80d8-af89fbb59c32","html_url":"https://github.com/trendmicro-frontend/react-iframe","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-iframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-iframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-iframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-iframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendmicro-frontend","download_url":"https://codeload.github.com/trendmicro-frontend/react-iframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231970066,"owners_count":18453907,"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":["iframe","mutationobserver","polling","react"],"created_at":"2024-08-03T10:00:54.564Z","updated_at":"2025-10-28T15:48:25.067Z","avatar_url":"https://github.com/trendmicro-frontend.png","language":"JavaScript","readme":"# react-iframe [![build status](https://travis-ci.org/trendmicro-frontend/react-iframe.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-iframe) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-iframe/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-iframe?branch=master)\n\n[![NPM](https://nodei.co/npm/@trendmicro/react-iframe.png?downloads=true\u0026stars=true)](https://nodei.co/npm/@trendmicro/react-iframe/)\n\nReact Iframe\n\nDemo: https://trendmicro-frontend.github.io/react-iframe\n\n## Installation\n\n1. Install the latest version of [react](https://github.com/facebook/react) and [react-iframe](https://github.com/trendmicro-frontend/react-iframe):\n\n  ```\n  npm install --save react @trendmicro/react-iframe\n  ```\n\n2. Install [react-iframe](https://github.com/trendmicro-frontend/react-iframe)` with \u003cb\u003e@trendmicro\u003c/b\u003e scope:\n\n  ```js\n  import Iframe from '@trendmicro/react-iframe';\n  ```\n\n## Usage\n\n### Fixed Iframe Height\n\n```js\n\u003cIframe src=\"index.html\" width=\"100%\" height={240} /\u003e\n```\n\n### Resize Iframe to Fit Content (Same Domain Only)\n\n```jsx\nimport ResizeObserver from 'resize-observer-polyfill';\n\n\u003cIframe\n    src=\"iframe.html\"\n    onLoad={({ event, iframe }) =\u003e {\n        if (!(iframe \u0026\u0026 iframe.contentDocument)) {\n            return;\n        }\n\n        const target = iframe.contentDocument.body;\n        const nextHeight = target.offsetHeight;\n        iframe.style.height = `${nextHeight}px`;\n\n        const observer = new ResizeObserver(entries =\u003e {\n            const target = iframe.contentDocument.body;\n            const nextHeight = target.offsetHeight;\n            iframe.style.height = `${nextHeight}px`;\n        });\n        observer.observe(target);\n    }}\n/\u003e\n```\n\n## API\n\n### Properties\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nsrc | string | | The src attribute specifies the address of the document to embed in the iframe.\nwidth | string or number | '100%' | The width attribute specifies the width of an iframe, in pixels.\nheight | string or number | '100%' | The height attribute specifies the height of an iframe, in pixels.\nsandbox | boolean, object, or string |  | The sandbox attribute enables an extra set of restrictions for the content in the iframe.\nsandbox.allowForms | boolean | true | Re-enables form submission.\nsandbox.allowModals | boolean | true | Sandboxed frames will block modal dialogs by default.\nsandbox.allowPointerLock | boolean | false | Re-enables APIs.\nsandbox.allowPopups | boolean | true | Re-enables popups.\nsandbox.allowSameOrigin | boolean | true | Allows the iframe content to be treated as being from the same origin.\nsandbox.allowScripts | boolean | true | Re-enables scripts.\nsandbox.allowTopNavigation | boolean | false | Allows the iframe content to navigate its top-level browsing context.\nonLoad | function | | Callback invoked when the iframe has been loaded: `({ event: Event, iframe: HTMLElement })`\nonBeforeUnload | function | | Callback invoked when the iframe is about to be unloaded: `({ event: Event, iframe: HTMLElement })`\nonUnload | function | | Callback invoked when the iframe has unloaded: `({ event: Event })`\n\n## License\n\nMIT\n","funding_links":[],"categories":["Trend Micro"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-iframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendmicro-frontend%2Freact-iframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-iframe/lists"}