@s-ui/react-atom-image - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0

lib/index.js

@@ -38,3 +38,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       onLoad = _ref2.onLoad,
-      imgProps = _objectWithoutPropertiesLoose(_ref2, ["placeholder", "skeleton", "bgStyles", "spinner", "errorIcon", "errorText", "onError", "onLoad"]);
+      _ref2$sources = _ref2.sources,
+      sources = _ref2$sources === void 0 ? [] : _ref2$sources,
+      alt = _ref2.alt,
+      imgProps = _objectWithoutPropertiesLoose(_ref2, ["placeholder", "skeleton", "bgStyles", "spinner", "errorIcon", "errorText", "onError", "onLoad", "sources", "alt"]);
 
@@ -78,8 +81,13 @@ var _useState = useState(true),
       style: !error && (placeholder || skeleton) ? figureStyles : {},
-      children: /*#__PURE__*/_jsx("img", _extends({
-        className: CLASS_IMAGE,
-        onLoad: handleLoad,
-        onError: handleError,
-        ref: imageRef
-      }, imgProps))
+      children: /*#__PURE__*/_jsxs("picture", {
+        children: [sources.map(function (source, idx) {
+          return /*#__PURE__*/_jsx("source", _extends({}, source), idx);
+        }), /*#__PURE__*/_jsx("img", _extends({
+          className: CLASS_IMAGE,
+          onLoad: handleLoad,
+          onError: handleError,
+          ref: imageRef,
+          alt: alt
+        }, imgProps))]
+      })
     }), !error && loading && SpinnerExtended, error && /*#__PURE__*/_jsx(Error, {
@@ -86,0 +94,0 @@ className: CLASS_ERROR,

package.json

 {
   "name": "@s-ui/react-atom-image",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -23,5 +23,5 @@ # AtomImage
 ```javascript
-<AtomImage 
-  src={ urlImage } 
-  alt="Nice Picture" 
+<AtomImage
+  src={ urlImage }
+  alt="Nice Picture"
 />
@@ -33,6 +33,6 @@ ```
 ```javascript
-<AtomImage 
-  src={ urlImage } 
-  alt="Nice Picture" 
-  skeleton={ urlImageSkeleton } 
+<AtomImage
+  src={ urlImage }
+  alt="Nice Picture"
+  skeleton={ urlImageSkeleton }
 />
@@ -44,5 +44,5 @@ ```
 ```javascript
-<AtomImage 
-  src={ urlImage } 
-  alt="Nice Picture" 
+<AtomImage
+  src={ urlImage }
+  alt="Nice Picture"
   placeholder={ urlImagePlaceholder }
@@ -55,5 +55,5 @@ />
 ```javascript
-<AtomImage 
-  src={ urlImage } 
-  alt="Nice Picture" 
+<AtomImage
+  src={ urlImage }
+  alt="Nice Picture"
   spinner={ Spinner }
@@ -66,5 +66,5 @@ />
 ```javascript
-<AtomImage 
-  src={ urlImage } 
-  alt="Nice Picture" 
+<AtomImage
+  src={ urlImage }
+  alt="Nice Picture"
   errorText="Oh no!! This image couldn't be loaded"
@@ -75,3 +75,16 @@ errorIcon={ MyIconErrorLoading }
 
+### With picture sources [mdn picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
 
-> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/image/demo).**
+Loads 50x50 image when the viewport is under 480px, elsewise it loads a 150x150 image
+
+```js
+<AtomImage
+  src='https://via.placeholder.com/50'
+  alt=''
+  sources={[
+    {srcset: 'https://via.placeholder.com/150', media: '(min-width: 480px)'}
+  ]}
+```
+
+
+> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/image/demo).**

No alert changes

Improved metrics

Total package byte prevSize

15520

increased by4.71%

Lines of code

106

increased by8.16%

Number of lines in readme file

85

increased by19.72%

No dependency changes