react-image-zoom - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/react-image-zoom.js

@@ -125,3 +125,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    scale: _react.PropTypes.number,
-	    offset: _react.PropTypes.object
+	    offset: _react.PropTypes.object,
+	    zoomStyle: _react.PropTypes.string
 	};
@@ -128,0 +129,0 @@ exports.default = ReactImageZoom;

dist/react-image-zoom.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("js-image-zoom"),require("react")):"function"==typeof define&&define.amd?define("ReactImageZoom",["js-image-zoom","react"],t):"object"==typeof exports?exports.ReactImageZoom=t(require("js-image-zoom"),require("react")):e.ReactImageZoom=t(e.ImageZoom,e.React)}(this,function(e,t){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),c=o(2),p=r(c),s=o(1),f=r(s),l=function(e){function t(){return n(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),a(t,[{key:"componentDidMount",value:function(){this.imageZoom=new f.default(this.refs.container,this.props)}},{key:"componentWillUnmount",value:function(){this.imageZoom.kill(),this.imageZoom=void 0}},{key:"componentWillReceiveProps",value:function(e){this.props.img!==e.img&&(this.imageZoom.kill(),this.imageZoom=new f.default(this.refs.container,e))}},{key:"render",value:function(){return p.default.createElement("div",{ref:"container"})}}]),t}(p.default.Component);l.propTypes={img:c.PropTypes.string.isRequired,height:c.PropTypes.number.isRequired,width:c.PropTypes.number.isRequired,zoomWidth:c.PropTypes.number,scale:c.PropTypes.number,offset:c.PropTypes.object},t.default=l,e.exports=t.default},function(t,o){t.exports=e},function(e,o){e.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("js-image-zoom"),require("react")):"function"==typeof define&&define.amd?define("ReactImageZoom",["js-image-zoom","react"],t):"object"==typeof exports?exports.ReactImageZoom=t(require("js-image-zoom"),require("react")):e.ReactImageZoom=t(e.ImageZoom,e.React)}(this,function(e,t){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),p=o(2),s=r(p),c=o(1),f=r(c),l=function(e){function t(){return n(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),a(t,[{key:"componentDidMount",value:function(){this.imageZoom=new f.default(this.refs.container,this.props)}},{key:"componentWillUnmount",value:function(){this.imageZoom.kill(),this.imageZoom=void 0}},{key:"componentWillReceiveProps",value:function(e){this.props.img!==e.img&&(this.imageZoom.kill(),this.imageZoom=new f.default(this.refs.container,e))}},{key:"render",value:function(){return s.default.createElement("div",{ref:"container"})}}]),t}(s.default.Component);l.propTypes={img:p.PropTypes.string.isRequired,height:p.PropTypes.number.isRequired,width:p.PropTypes.number.isRequired,zoomWidth:p.PropTypes.number,scale:p.PropTypes.number,offset:p.PropTypes.object,zoomStyle:p.PropTypes.string},t.default=l,e.exports=t.default},function(t,o){t.exports=e},function(e,o){e.exports=t}])});

example/index.js

@@ -8,3 +8,2 @@ import React, { Component } from 'react';
         const props = {width: 400, height: 250, zoomWidth: 500, img: "1.jpg", offset: {vertical: 0, horizontal: 10}};
-
         return (
@@ -11,0 +10,0 @@ <div>

index.js

@@ -69,5 +69,6 @@ 'use strict';
     scale: _react.PropTypes.number,
-    offset: _react.PropTypes.object
+    offset: _react.PropTypes.object,
+    zoomStyle: _react.PropTypes.string
 };
 exports.default = ReactImageZoom;
 module.exports = exports['default'];

package.json

 {
   "name": "react-image-zoom",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "react based image zoomer on mouse hover",
@@ -13,3 +13,3 @@ "homepage": "https://github.com/malaman/react-image-zoom",
   "dependencies": {
-    "js-image-zoom": "^0.1.2"
+    "js-image-zoom": "^0.2.0"
   },
@@ -62,5 +62,23 @@ "devDependencies": {
     "image",
-    "zoom"
+    "zoom",
+    "image magnifier",
+    "image enlarger",
+    "image lens",
+    "photo zoom",
+    "photo magnifier",
+    "photo enlarger",
+    "photo lens",
+    "image zoom",
+    "image magnifier",
+    "image enlarger",
+    "photo zoom",
+    "photo magnifier",
+    "photo enlarger",
+    "zoom",
+    "magnify",
+    "enlarge",
+    "react-image-zoom",
+    "react-photo-zoom"
   ],
   "author": "Andrii Malaman <[e-mail]>"
 }

README.md

@@ -36,2 +36,3 @@ # react-image-zoom
 - **offset** (object) - {vertical: number, horizontal: number}. Zoomed image offset (optional)
+* **zoomStyle** (string) - custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')
 
@@ -38,0 +39,0 @@ ##RouteMap

src/react-image-zoom.js

@@ -12,2 +12,3 @@ import React, {PropTypes} from 'react';
         offset: PropTypes.object,
+        zoomStyle: PropTypes.string,
     };
@@ -31,3 +32,2 @@
 
-
     render() {
@@ -34,0 +34,0 @@ return <div ref='container' />;

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

566329

increased by0.32%

Number of downloads

8351

increased by68.6%

Number of package files

15

increased by7.14%

Lines of code

1226

increased by0.25%

Number of lines in readme file

41

increased by2.5%

Dependency changes

• + Addedjs-image-zoom@0.2.1(transitive)

• - Removedjs-image-zoom@0.1.2(transitive)

• Updatedjs-image-zoom@^0.2.0