lets compare this

package.json

@@ -18,8 +18,8 @@
   ],
   "author": "Leland Richardson",
   "license": "MIT",
-  "dependencies": {
-    "react": "^0.13.3"
+  "peerDependencies": {
+    "react": "^0.14.0"
   },
   "devDependencies": {
     "es5-shim": "^4.1.3",

src/ImageMagnifier.js

@@ -19,42 +19,35 @@ var Magnifier = React.createClass({
         // y position relative to the image
         offsetY: React.PropTypes.number.isRequired,
 
+        mag: React.PropTypes.number.isRequired,
+
         // the offset of the zoom bubble from the cursor
         cursorOffset: React.PropTypes.shape({
             x: React.PropTypes.number.isRequired,
             y: React.PropTypes.number.isRequired
         }).isRequired,
 
-        // the size of the non-zoomed-in image
-        smallImage: React.PropTypes.shape({
-            src: React.PropTypes.string.isRequired,
-            width: React.PropTypes.number.isRequired,
-            height: React.PropTypes.number.isRequired
-        }).isRequired,
-
         // the size of the zoomed-in image
         zoomImage: React.PropTypes.shape({
-            src: React.PropTypes.string.isRequired,
-            width: React.PropTypes.number.isRequired,
-            height: React.PropTypes.number.isRequired
+            src: React.PropTypes.string.isRequired
         }).isRequired
     },
 
     render () {
         var props = this.props;
         var halfSize = props.size / 2;
-        var magX = props.zoomImage.width / props.smallImage.width;
-        var magY = props.zoomImage.height / props.smallImage.height;
-        var bgX = -(props.offsetX*magX - halfSize);
-        var bgY = -(props.offsetY*magY - halfSize);
-        var isVisible = props.offsetY < props.smallImage.height &&
-                        props.offsetX < props.smallImage.width &&
-                        props.offsetY > 0 &&
-                        props.offsetX > 0;
+        var zoomedSize = props.zoomedSize;
+
+        let { mag } = this.props;
+        let bgX = - props.offsetX * props.zoomedSize + halfSize;
+        let bgY = - props.offsetY * props.zoomedSize + halfSize;
+
         return (
-            <div style={{
-                position: 'absolute',
-                display: isVisible ? 'block' : 'none',
+            <div className="react-image-magnifier-lens"
+                 onMouseMove={this.props.onMouseMove}
+                 style={{
+                position: 'fixed',
+                display: props.isVisible ? 'block' : 'none',
                 top: props.y,
                 left: props.x,
                 width: props.size,
@@ -63,30 +56,31 @@ var Magnifier = React.createClass({
                 marginTop: -halfSize + props.cursorOffset.y,
                 backgroundColor: 'white',
                 borderRadius: props.size,
-                boxShadow: `1px 1px 6px rgba(0,0,0,0.3)`
+                boxShadow: `1px 1px 6px rgba(0,0,0,0.3)`,
+                overflow: "hidden",
+                zIndex: 1000000000
             }}>
                 <div style={{
-                    width: props.size,
-                    height: props.size,
+                    width: `${zoomedSize}px`,
+                    height: `${zoomedSize}px`,
+                    position: "absolute",
+                    left: `${bgX}px`,
+                    top: `${bgY}px`,
+
                     backgroundImage: `url(${props.zoomImage.src})`,
                     backgroundRepeat: 'no-repeat',
-                    backgroundPosition: `${bgX}px ${bgY}px`,
-                    borderRadius: props.size
+                    backgroundPosition: "center center",
+                    backgroundSize: "contain"
                 }} />
             </div>
         );
     }
 });
 
-function getOffset(el) {
-    var x = 0;
-    var y = 0;
-    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
-        x += el.offsetLeft - el.scrollLeft;
-        y += el.offsetTop - el.scrollTop;
-        el = el.offsetParent;
-    }
-    return { x, y };
+function isInsideBoundingRect(el, { x, y }) {
+  let rect = el.getBoundingClientRect();
+  return x >= rect.left && x <= rect.right &&
+         y <= rect.bottom && y >= rect.top;
 }
 
 var ImageMagnifier = React.createClass({
@@ -96,6 +90,8 @@ var ImageMagnifier = React.createClass({
         // the size of the magnifier window
         size: React.PropTypes.number,
 
+        zoomedSize: React.PropTypes.number,
+
         // the offset of the zoom bubble from the cursor
         cursorOffset: React.PropTypes.shape({
             x: React.PropTypes.number.isRequired,
@@ -136,7 +132,6 @@ var ImageMagnifier = React.createClass({
     },
 
     componentDidMount() {
-        document.addEventListener('mousemove', this.onMouseMove);
         if (!this.portalElement) {
             this.portalElement = document.createElement('div');
             document.body.appendChild(this.portalElement);
@@ -145,37 +140,80 @@ var ImageMagnifier = React.createClass({
     },
 
     componentWillUnmount() {
-        document.removeEventListener('mousemove', this.onMouseMove);
         document.body.removeChild(this.portalElement);
         this.portalElement = null;
     },
 
+    onMouseEnter(e) {
+        this.setState({ isVisible: true });
+    },
+
+    onMouseLeave(e) {
+        let pos = {
+            x: e.clientX,
+            y: e.clientX
+        };
+
+        this.setState({
+            isVisible: isInsideBoundingRect(this.getDOMNode(), pos)
+        });
+    },
+
     onMouseMove (e) {
-        var offset = getOffset(this.getDOMNode());
+        let rect = this.getDOMNode().getBoundingClientRect();
+
+        let pos = {
+            x: e.clientX,
+            y: e.clientY
+        };
+
+        let maxSize = Math.max(rect.width, rect.height);
+        let baseLeft = rect.left + rect.width / 2 - maxSize / 2;
+        let baseTop = rect.top + rect.height / 2 - maxSize / 2;
+
+        let offsetX = (pos.x - baseLeft) / maxSize;
+        let offsetY = (pos.y - baseTop) / maxSize;
 
         this.setState({
-            x: e.x + window.scrollX,
-            y: e.y + window.scrollY,
-            offsetX: e.x - offset.x,
-            offsetY: e.y - offset.y
+            x: e.clientX,
+            y: e.clientY,
+            offsetX: offsetX,
+            offsetY: offsetY,
+            isVisible: isInsideBoundingRect(this.getDOMNode(), pos)
         });
     },
 
     componentDidUpdate() {
+        let el = this.getDOMNode();
+        let rect = el.getBoundingClientRect();
+
+        let mag = this.props.zoomedSize / Math.max(
+            rect.width,
+            rect.height
+        );
+
         React.render(<Magnifier
+            mag={mag}
             size={this.props.size}
             smallImage={this.props.image}
+            zoomedSize={this.props.zoomedSize}
             zoomImage={this.props.zoomImage}
             cursorOffset={this.props.cursorOffset}
+            onMouseMove={this.onMouseMove}
             {...this.state}
         />, this.portalElement);
     },
 
     render () {
         return (
-            <img {...this.props} src={this.props.image.src} />
+            <img {...this.props}
+                 className="react-image-magnifier-original"
+                 src={this.props.image.src}
+                 onMouseMove={this.onMouseMove}
+                 onMouseEnter={this.onMouseEnter}
+                 onMouseLeave={this.onMouseLeave} />
         );
     }
 });
 
-module.exports = ImageMagnifier;
+module.exports = ImageMagnifier;