Nitrogenous Polymorphic Molecule

    @trendmicro/react-iframe

    1.0.1 • Public • Published

    react-iframe build status Coverage Status

    NPM

    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
    
    1. 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

    Install

    npm i @trendmicro/react-iframe

    DownloadsWeekly Downloads

    588

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    18.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase