react-iframe - npm Package Compare versions

Comparing version 1.8.1 to 1.8.2

CHANGELOG.md

@@ -5,2 +5,6 @@ # Change Log
 
+## [1.8.2](https://github.com/svenanders/react-iframe/compare/v1.8.1...v1.8.2) (2022-09-26)
+
+
+
 ## [1.8.1](https://github.com/svenanders/react-iframe/compare/v1.8.0...v1.8.1) (2022-09-26)
@@ -7,0 +11,0 @@

demo/iframe.js

@@ -1,100 +0,71 @@
-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,
-		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
+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,
+        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({ allowfullscreen: "allowfullscreen" }, props));
+};
+export default Iframe;

demo/package.json

@@ -17,3 +17,3 @@ {
     "react-dom": "^16.14.0",
-    "react-iframe": "^1.8.0",
+    "react-iframe": "^1.8.1",
     "webpack": "^4.46.0",
@@ -20,0 +20,0 @@ "webpack-dev-server": "^3.11.3"

iframe.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../src/iframe.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG5C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEjC,QAAA,MAAM,MAAM,EAAE,aAAa,CAAC,OAAO,CAiFlC,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../src/iframe.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG5C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEjC,QAAA,MAAM,MAAM,EAAE,aAAa,CAAC,OAAO,CAoGlC,CAAA;AAED,eAAe,MAAM,CAAA"}

package.json

 {
   "name": "react-iframe",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "Easy peasy lemon squeezy iframes with react",
@@ -39,3 +39,3 @@ "main": "dist/cjs/iframe.js",
     "eslint-plugin-react": "7.31.8",
-    "husky": "^1.3.1",
+    "husky": "^7.0.0",
     "jest": "^24.9.0",
@@ -60,3 +60,3 @@ "lint-staged": "^8.2.1",
     "*.js": [
-      "prettier --semi false --single-quote false --write",
+      "prettier --semi false false --write",
       "git add"
@@ -88,3 +88,4 @@ ]
     "lint": "eslint src/iframe.tsx --config .eslintrc.json",
-    "release": "standard-version"
+    "release": "standard-version",
+    "prepare": "husky install"
   },
@@ -91,0 +92,0 @@ "husky": {

README.md

@@ -13,7 +13,7 @@ # React Iframe
 import Iframe from 'react-iframe'
-<Iframe url="http://www.youtube.com/embed/xDMP3i36naA"
-        width="450px"
-        height="450px"
-        id="myId"
-        className="myClassname"
+<Iframe url="https://www.sdrive.app/embed/1ptBQD"
+        width="640px"
+        height="320px"
+        id=""
+        className=""
         display="block"
@@ -20,0 +20,0 @@ position="relative"/>

src/iframe.tsx

@@ -6,13 +6,33 @@ import React, { ComponentType } from "react"
 
-const Iframe: ComponentType<IIframe>
-	= ({
-			 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
-		 }: IIframe) => {
-
+const Iframe: ComponentType<IIframe> = ({
+	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
+}: IIframe) => {
 	const defaultProps = objectAssign({
@@ -45,4 +65,4 @@ src: src || url,
 		onMouseOver: onMouseOver || null,
-    onMouseOut: onMouseOut || null,
-    key: key || "iframe"
+		onMouseOut: onMouseOut || null,
+		key: key || "iframe"
 	})
@@ -65,6 +85,6 @@ let props = Object.create(null)
 			if (props.styles.hasOwnProperty(key)) {
-				props.style[key] = props.styles[key];
+				props.style[key] = props.styles[key]
 			}
 			if (Object.keys(props.styles).pop() == key) {
-				delete props.styles;
+				delete props.styles
 			}
@@ -74,6 +94,6 @@ }
 
-	if(allowFullScreen){
-		if("allow" in props){
-			const currentAllow = props.allow.replace("fullscreen","")
-			props.allow = `fullscreen ${currentAllow.trim()}`.trim()	
+	if (allowFullScreen) {
+		if ("allow" in props) {
+			const currentAllow = props.allow.replace("fullscreen", "")
+			props.allow = `fullscreen ${currentAllow.trim()}`.trim()
 		} else {
@@ -84,11 +104,10 @@ props.allow = "fullscreen"
 
-	if(frameBorder >= 0){
-		if(!props.style.hasOwnProperty("border")){
+	if (frameBorder >= 0) {
+		if (!props.style.hasOwnProperty("border")) {
 			props.style.border = frameBorder
 		}
 	}
-	return <iframe {...props}/>
-
+	return <iframe {...props} />
 }
 
 export default Iframe

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

337721

0.13%

Number of package files

39

2.63%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Lines of code

638

-1.09%

No dependency changes