react-cloudimage-responsive - npm Package Compare versions

Comparing version 3.2.4 to 3.3.0

CHANGELOG.md

@@ -29,2 +29,10 @@ # Changelog
 
+## 3.2.4 - 2020-04-28
+
+### Fixed
+- problem with srcset attribute
+
+### Added
+- add SSR support
+
 ## 3.2.3 - 2020-04-28
@@ -31,0 +39,0 @@

dist/img.js

@@ -78,3 +78,9 @@ "use strict";
     _defineProperty(_assertThisInitialized(_this), "onPreviewLoaded", function (event) {
+      if (_this.state.previewLoaded) return;
+
       _this.updateLoadedImageSize(event.target);
+
+      _this.setState({
+        previewLoaded: true
+      });
     });
@@ -84,5 +90,5 @@
       _this.setState({
-        loadedImageWidth: image.width,
-        loadedImageHeight: image.height,
-        loadedImageRatio: image.width / image.height
+        loadedImageWidth: image.naturalWidth,
+        loadedImageHeight: image.naturalHeight,
+        loadedImageRatio: image.naturalWidth / image.naturalHeight
       });
@@ -89,0 +95,0 @@ });

dist/provider.js

@@ -93,3 +93,4 @@ "use strict";
         limitFactor = _config$limitFactor === void 0 ? 100 : _config$limitFactor,
-        devicePixelRatioList = config.devicePixelRatioList,
+        _config$devicePixelRa = config.devicePixelRatioList,
+        devicePixelRatioList = _config$devicePixelRa === void 0 ? _cloudimageResponsiveUtils.CONSTANTS.DEVICE_PIXEL_RATIO_LIST : _config$devicePixelRa,
         _config$lowQualityPre = config.lowQualityPreview;
@@ -124,3 +125,3 @@ _config$lowQualityPre = _config$lowQualityPre === void 0 ? {} : _config$lowQualityPre;
       doNotReplaceURL: doNotReplaceURL,
-      devicePixelRatioList: devicePixelRatioList || _cloudimageResponsiveUtils.CONSTANTS.DEVICE_PIXEL_RATIO_LIST,
+      devicePixelRatioList: devicePixelRatioList,
       limitFactor: limitFactor,
@@ -127,0 +128,0 @@ minLowQualityWidth: minImgWidth

package.json

 {
   "name": "react-cloudimage-responsive",
-  "version": "3.2.4",
+  "version": "3.3.0",
   "main": "dist/index.js",
@@ -44,3 +44,4 @@ "description": "Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load.",
     "core-js": "^3.6.5",
-    "throttle-debounce": "^2.0.1"
+    "throttle-debounce": "^2.0.1",
+    "react-lazyload": "^2.6.7"
   },
@@ -71,3 +72,2 @@ "peerDependencies": {
     "react-dom": "^16.13.1",
-    "react-lazyload": "^2.6.7",
     "react-syntax-highlighter": "^10.2.0",
@@ -74,0 +74,0 @@ "style-loader": "^0.23.1",

README.md

@@ -189,2 +189,12 @@ [![Release](https://img.shields.io/badge/release-v3.2.1-blue.svg)](https://github.com/scaleflex/react-cloudimage-responsive/releases)
 
+### lazyLoadOffset
+
+######  Type: **Number/Array(Number)** | Default: **100**
+
+Say if you want to preload a component even if it's 100px below the viewport (user have to scroll 100px more to see this component), you can set offset props to 100. On the other hand, if you want to delay loading a component even if it's top edge has already appeared at viewport, set offset to negative number.
+
+Library supports horizontal lazy load out of the box. So when you provide this prop with number like 100 it will automatically set left edge offset to 100 and top edge to 100;
+
+If you provide this prop with array like [100, 200], it will set left edge offset to 100 and top offset to 200.
+
 ### params
@@ -224,2 +234,16 @@
 
+### lowQualityPreview
+
+###### Type: **Object**
+
+* `lowQualityPreview.minImgWidth` number (default: 400) - minimal width of an image to load low quality preview image
+
+Example:
+
+```javascript
+lowQualityPreview: {
+  minImgWidth = 400
+}
+```
+
 ### presets
@@ -248,2 +272,18 @@
 
+### limitFactor
+
+###### Type: **Number** | Default: **100** | _optional_
+
+Rounds up size of an image to nearest limitFactor value.
+
+For example
+* for an image with width **358px** and limitFactor equals **100** the plugin will round up to 400px
+* for an image with width **358px** and limitFactor equals **5** the plugin will round up to 360px
+
+### devicePixelRatioList
+
+###### Type: **[Number,...]** | Default: **[1, 1.5, 2, 3, 4]** | _optional_
+
+List of supported device pixel ratios. If there is no need to support retina devices, you should set empty array `devicePixelRatioList: []`
+
 ## <a name="image_properties"></a> Image properties
@@ -263,2 +303,37 @@
 
+### width
+
+###### Type: **String** (e.g. 300px, 20vw) | Default: **undefined**
+
+If it's set the plugin will use width as fixed value and change only according device pixel ratio.
+
+### height
+
+###### Type: **String** (e.g. 300px, 20vh) | Default: **undefined**
+
+If it's set the plugin will use height as fixed value and change only according device pixel ratio.
+
+### params
+
+###### Type: **String** | Default: **undefined** | _optional_
+
+You can apply any Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...
+Multiple params can be applied, separated by "```&```" e.g. **wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1**
+
+```javascript
+params="gray=1&bright=10"
+```
+
+#### alternative syntax: type: **Object**
+
+```javascript
+params={{
+    bright: 10,
+    grey: 1,
+    ...
+}}
+```
+
+[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)
+
 ### sizes
@@ -274,8 +349,8 @@
   sizes={{
-      xs: { w: 200, h: 100 },
-      sm: { w: 400, h: 200 },
-      '(min-width: 620px)': { w: 200, h: 60 },
-      md: { w: 250, h: 350 },
-      lg: { w: 350, h: 300 },
-      xl: { w: 400, h: 250 }
+    '(max-width: 575px)': { w: 400, h: 150 },
+    '(min-width): 576px)': { r: 1 },
+    '(min-width: 620px)': { h: 560 },
+    '(min-width: 768px)': { w: '50vw' },
+    '(min-width: 992px)': { w: '55vw', h: 300 },
+    '(min-width: 1200px)': { w: 1200 }
  }}/>
@@ -295,2 +370,8 @@ ```
 
+##### new experimental syntax
+
+md: { w: '40vw', h: 350 } or md: { w: 250, h: '20vh' }
+
+adds possibility to use fixed height or width and change dynamically other dimension
+
 **NOTE:** if size is not set, the plugin uses a special algorithm to
@@ -297,0 +378,0 @@ detect the width of image container and set the image size accordingly. This is the recommended way of using the Cloudimage Responsive plugin.

No alert changes

Improved metrics

Total package byte prevSize

69048

increased by4.53%

Dev dependency count

25

decreased by-3.85%

Lines of code

873

increased by0.58%

Number of lines in readme file

430

increased by23.21%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedreact-lazyload@^2.6.7

• + Addedreact-lazyload@2.6.9(transitive)