react-progressive-image-loading - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

build/index.d.ts

@@ -9,2 +9,4 @@ /// <reference types="react" />
     background?: boolean;
+    transitionTime?: number;
+    timingFunction?: string;
 }
@@ -17,2 +19,6 @@ export interface ProgressiveImageState {
     private clonedProps;
+    static defaultProps: {
+        transitionTime: number;
+        timingFunction: string;
+    };
     componentWillMount(): void;
@@ -19,0 +25,0 @@ render(): JSX.Element;

build/index.js

@@ -33,5 +33,8 @@ "use strict";
         var _a = this.props, src = _a.src, preview = _a.preview;
-        this.setState({ src: preview, blur: 10 });
+        this.setState({ src: "", blur: 10 });
         this.cloneProps();
-        fetch(src).then(function () { return _this.setState({ src: src, blur: 0 }); });
+        fetch(preview)
+            .then(function () { return _this.setState({ src: preview, blur: 10 }); })
+            .then(function () { return fetch(src); })
+            .then(function () { return _this.setState({ src: src, blur: 0 }); });
     };
@@ -52,19 +55,23 @@ ProgressiveImage.prototype.render = function () {
     ProgressiveImage.prototype.getStyle = function () {
+        var _a = this.props, transitionTime = _a.transitionTime, timingFunction = _a.timingFunction;
         var blur = this.state.blur;
         return {
             filter: "blur(" + blur + "px)",
-            transition: "filter 500ms ease"
+            transition: "filter " + transitionTime + "ms " + timingFunction
         };
     };
     ProgressiveImage.prototype.getBackgroundStyle = function () {
-        var _a = this.state, src = _a.src, blur = _a.blur;
-        return {
-            backgroundImage: "url(" + src + ")",
-            filter: "blur(" + blur + "px)",
-            transition: "filter 500ms ease"
+        var src = this.state.src;
+        var style = {
+            backgroundImage: "url(" + src + ")"
         };
+        return lodash_1.assign(style, this.getStyle());
     };
     return ProgressiveImage;
 }(React.Component));
+ProgressiveImage.defaultProps = {
+    transitionTime: 500,
+    timingFunction: "ease"
+};
 exports.ProgressiveImage = ProgressiveImage;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-progressive-image-loading",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Progressively load images using a blur effect. Edit",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -5,1 +5,7 @@ # React Progressive Image Loading
 [![CircleCI](https://circleci.com/gh/wcandillon/react-progressive-image-loading.svg?style=svg)](https://circleci.com/gh/wcandillon/react-progressive-image-loading)
+
+## Installation
+
+```bash
+$ npm install react-progressive-image-loading --save
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18938

increased by4.7%

Lines of code

101

increased by14.77%

Number of lines in readme file

10

increased by100%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes