react-iframe/demo/iframe.js

Easy peasy lemon squeezy iframes with react

import React from "react";
import objectAssign from "object-assign";
const Iframe = ({ url, allowFullScreen, position, display, height, width, overflow, styles, onLoad, onMouseOver, onMouseOut, scrolling, id, frameBorder, ariaHidden, sandbox, allow, className, title, ariaLabel, ariaLabelledby, name, target, loading, importance, referrerpolicy, allowpaymentrequest, src, key }) => {
    const defaultProps = objectAssign({
        src: src || url,
        target: target || null,
        style: {
            position: position || null,
            display: display || "initial",
            overflow: overflow || null
        },
        scrolling: scrolling || null,
        allowpaymentrequest: allowpaymentrequest || null,
        importance: importance || null,
        sandbox: (sandbox && [...sandbox].join(" ")) || null,
        loading: loading || null,
        styles: styles || null,
        name: name || null,
        className: className || null,
        allowFullScreen: "allowFullScreen" || null,
        referrerpolicy: referrerpolicy || null,
        title: title || null,
        allow: allow || null,
        id: id || null,
        "aria-labelledby": ariaLabelledby || null,
        "aria-hidden": ariaHidden || null,
        "aria-label": ariaLabel || null,
        width: width || null,
        height: height || null,
        onLoad: onLoad || null,
        onMouseOver: onMouseOver || null,
        onMouseOut: onMouseOut || null,
        key: key || "iframe"
    });
    let props = Object.create(null);
    for (let prop of Object.keys(defaultProps)) {
        if (defaultProps[prop] != null) {
            props[prop] = defaultProps[prop];
        }
    }
    for (let i of Object.keys(props.style)) {
        if (props.style[i] == null) {
            delete props.style[i];
        }
    }
    if (props.styles) {
        for (let key of Object.keys(props.styles)) {
            if (props.styles.hasOwnProperty(key)) {
                props.style[key] = props.styles[key];
            }
            if (Object.keys(props.styles).pop() == key) {
                delete props.styles;
            }
        }
    }
    if (allowFullScreen) {
        if ("allow" in props) {
            const currentAllow = props.allow.replace("fullscreen", "");
            props.allow = `fullscreen ${currentAllow.trim()}`.trim();
        }
        else {
            props.allow = "fullscreen";
        }
    }
    if (frameBorder >= 0) {
        if (!props.style.hasOwnProperty("border")) {
            props.style.border = frameBorder;
        }
    }
    return React.createElement("iframe", Object.assign({}, props));
};
export default Iframe;