react-iframe

React Iframe

Demo: https://trendmicro-frontend.github.io/react-iframe

Installation

1. Install the latest version of react and react-iframe:

npm install --save react @trendmicro/react-iframe

2. Install react-iframe` with @trendmicro scope:

import Iframe from '@trendmicro/react-iframe';

Usage

Fixed Iframe Height

<Iframe src="index.html" width="100%" height={240} />

Resize Iframe to Fit Content (Same Domain Only)

import ResizeObserver from 'resize-observer-polyfill';

<Iframe
    src="iframe.html"
    onLoad={({ event, iframe }) => {
        if (!(iframe && iframe.contentDocument)) {
            return;
        }

        const target = iframe.contentDocument.body;
        const nextHeight = target.offsetHeight;
        iframe.style.height = `${nextHeight}px`;

        const observer = new ResizeObserver(entries => {
            const target = iframe.contentDocument.body;
            const nextHeight = target.offsetHeight;
            iframe.style.height = `${nextHeight}px`;
        });
        observer.observe(target);
    }}
/>

API

Properties

Name | Type | Default | Description :--- | :--- | :------ | :---------- src | string | | The src attribute specifies the address of the document to embed in the iframe. width | string or number | '100%' | The width attribute specifies the width of an iframe, in pixels. height | string or number | '100%' | The height attribute specifies the height of an iframe, in pixels. sandbox | boolean, object, or string | | The sandbox attribute enables an extra set of restrictions for the content in the iframe. sandbox.allowForms | boolean | true | Re-enables form submission. sandbox.allowModals | boolean | true | Sandboxed frames will block modal dialogs by default. sandbox.allowPointerLock | boolean | false | Re-enables APIs. sandbox.allowPopups | boolean | true | Re-enables popups. sandbox.allowSameOrigin | boolean | true | Allows the iframe content to be treated as being from the same origin. sandbox.allowScripts | boolean | true | Re-enables scripts. sandbox.allowTopNavigation | boolean | false | Allows the iframe content to navigate its top-level browsing context. onLoad | function | | Callback invoked when the iframe has been loaded: ({ event: Event, iframe: HTMLElement }) onBeforeUnload | function | | Callback invoked when the iframe is about to be unloaded: ({ event: Event, iframe: HTMLElement }) onUnload | function | | Callback invoked when the iframe has unloaded: ({ event: Event })

License

MIT