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

Comparing version 1.0.7 to 1.0.8

build/index.d.ts

@@ -24,3 +24,3 @@ /// <reference types="react" />
     render(): JSX.Element;
-    private fetch(uri);
+    private fetch(src);
     private cloneProps();
@@ -27,0 +27,0 @@ private getStyle();

build/index.js

@@ -46,13 +46,7 @@ "use strict";
     };
-    ProgressiveImage.prototype.fetch = function (uri) {
+    ProgressiveImage.prototype.fetch = function (src) {
         return new Promise(function (resolve) {
-            fetch(uri)
-                .then(function (response) { return response.blob(); })
-                .then(function (blob) {
-                var fp = new FileReader();
-                fp.onload = function () {
-                    resolve(fp.result);
-                };
-                fp.readAsDataURL(blob);
-            });
+            var image = new Image();
+            image.src = src;
+            image.addEventListener("load", function () { return resolve(src); }, false);
         });
@@ -59,0 +53,0 @@ };

package.json

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

README.md

@@ -5,3 +5,6 @@ # 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)
+[![npm version](https://badge.fury.io/js/react-progressive-image-loading.svg)](https://badge.fury.io/js/react-progressive-image-loading)
 
+![example](http://i.imgur.com/fL5Qqvj.gif)
+
 ## Installation
@@ -11,2 +14,24 @@
 $ npm install react-progressive-image-loading --save
-```
+```
+
+## Usage
+
+```jsx
+<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png" />
+```
+
+Instead of using the `img` tag, you can use `background=true` that will generate a `div` with `background-image` as inlined css.
+
+```jsx
+<ProgressiveImage preview="/images/tiny-preview.png" src="/images/preview.png" background={true} />
+```
+
+You can also customize the transition time and the timing function used for that transition.
+
+```jsx
+<ProgressiveImage preview="/images/tiny-preview.png"
+                  src="/images/preview.png"
+                  transitionTime={500}
+                  transitionFunction="ease"
+/>
+```

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

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20434

increased by2.51%

Number of lines in readme file

36

increased by260%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

108

decreased by-5.26%

No dependency changes