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