super-image - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/index.js

@@ -68,2 +68,27 @@ 'use strict';
 
+      // Render picture element if `sources` property exists
+      if (this.props.sources.length > 0) {
+        var styleAttrForPict = {};
+
+        if (this.props.flexible) {
+          styleAttrForPict.width = '100%';
+          styleAttrForPict.height = '100%';
+        }
+
+        return React.createElement(
+          'picture',
+          { style: styleAttrForPict },
+          this.props.sources.map(function (source, i) {
+            /* eslint-disable react/no-array-index-key */
+            return React.createElement('source', _extends({ key: i }, source));
+            /* eslint-disable react/no-array-index-key */
+          }),
+          React.createElement('img', _extends({
+            src: this.props.src,
+            alt: this.props.alt,
+            style: styleAttr
+          }, extendsProps))
+        );
+      }
+
       return React.createElement('img', _extends({
@@ -124,2 +149,8 @@ src: this.props.src,
   src: PropTypes.string.isRequired,
+  sources: PropTypes.arrayOf(PropTypes.shape({
+    srcSet: PropTypes.string,
+    sizes: PropTypes.string,
+    media: PropTypes.string,
+    type: PropTypes.string
+  })),
   width: PropTypes.string,
@@ -134,2 +165,3 @@ height: PropTypes.string,
 SuperImage.defaultProps = {
+  sources: [],
   width: null,
@@ -136,0 +168,0 @@ height: null,

package.json

 {
   "name": "super-image",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React component that render a image with object-fit and its fallback",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -8,3 +8,3 @@ # SuperImage
 
-> React component that render a image with [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit) and its fallback
+> React component that render the HTML `<img>` or `<picture>` with [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit) and its fallback
 
@@ -30,2 +30,12 @@ ## Install
 
+// Use picture element
+<SuperImage
+  src="image.png"
+  sources={[{ srcSet : '[e-mail] 2x' }]}
+  width="160"
+  height="90"
+  alt="super-image"
+  fit="contain"
+/>
+
 // Not supported object fit
@@ -47,2 +57,3 @@ <SuperImage
 | src | String | Image url | - | Yes |
+| sources | Array | Array of objects with source element properties. "srcSet", "sizes", "media" and "type" supported | [] | No |
 | width | [`DOMString`](https://heycam.github.io/webidl/#idl-DOMString) | Image width | - | No |
@@ -49,0 +60,0 @@ | height | [`DOMString`](https://heycam.github.io/webidl/#idl-DOMString) | Image height | - | No |

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13200

increased by18.8%

Number of package files

9

increased by12.5%

Lines of code

184

increased by18.71%

Number of lines in readme file

67

increased by19.64%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes