Attempted fix for issue #19

Read props at render time, instead of in the constructor. That way if
props change we're always reading the latest values.

Author: MatrixFrog

src/index.js

@@ -1,101 +1,83 @@
 /* eslint jsx-a11y/mouse-events-have-key-events: 0 */
-import React, { Component, createRef } from 'react'
-import PropTypes from 'prop-types'
-import styles from './style.css'
+import React, { Component, createRef } from "react";
+import PropTypes from "prop-types";
+import styles from "./style.css";
 
 class Zoom extends Component {
-  constructor (props) {
-    super(props)
+  constructor(props) {
+    super(props);
 
     this.state = {
       zoom: false,
       mouseX: null,
       mouseY: null,
-    }
+    };
 
-    const {
-      height,
-      img,
-      transitionTime,
-      width,
-    } = props
-
-    this.outerDivStyle = {
-      height: `${height}px`,
-      width: `${width}px`,
-      overflow: 'hidden',
-    }
+    this.imageRef = createRef();
 
-    this.innerDivStyle = {
-      height: `${height}px`,
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
-      backgroundSize: 'auto 100%',
-      transition: `transform ${transitionTime}s ease-out`,
-      backgroundImage: `url('${img}')`,
-    }
-
-    this.imageRef = createRef()
-
-    this.handleMouseOver = this.handleMouseOver.bind(this)
-    this.handleMouseOut = this.handleMouseOut.bind(this)
-    this.handleMouseMovement = this.handleMouseMovement.bind(this)
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.handleMouseMovement = this.handleMouseMovement.bind(this);
   }
 
-  handleMouseOver () {
+  handleMouseOver() {
     this.setState({
       zoom: true,
-    })
+    });
   }
 
-  handleMouseOut () {
+  handleMouseOut() {
     this.setState({
       zoom: false,
-    })
+    });
   }
 
-  handleMouseMovement (e) {
-    const {
-      left: offsetLeft,
-      top: offsetTop,
-    } = this.imageRef.current.getBoundingClientRect()
+  handleMouseMovement(e) {
+    const { left: offsetLeft, top: offsetTop } =
+      this.imageRef.current.getBoundingClientRect();
 
     const {
       current: {
-        style: {
-          height,
-          width,
-        },
+        style: { height, width },
       },
-    } = this.imageRef
+    } = this.imageRef;
 
-    const x = ((e.pageX - offsetLeft) / parseInt(width, 10)) * 100
-    const y = ((e.pageY - offsetTop) / parseInt(height, 10)) * 100
+    const x = ((e.pageX - offsetLeft) / parseInt(width, 10)) * 100;
+    const y = ((e.pageY - offsetTop) / parseInt(height, 10)) * 100;
 
     this.setState({
       mouseX: x,
       mouseY: y,
-    })
+    });
   }
 
-  render () {
-    const {
-      mouseX,
-      mouseY,
-      zoom,
-    } = this.state
+  render() {
+    const { mouseX, mouseY, zoom } = this.state;
 
-    const {
-      zoomScale,
-    } = this.props
+    const { zoomScale, height, width, img, transitionTime } = this.props;
 
     const transform = {
       transformOrigin: `${mouseX}% ${mouseY}%`,
-    }
+    };
+
+    const outerDivStyle = {
+      height: `${height}px`,
+      width: `${width}px`,
+      overflow: "hidden",
+    };
+
+    const innerDivStyle = {
+      height: `${height}px`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center",
+      backgroundSize: "auto 100%",
+      transition: `transform ${transitionTime}s ease-out`,
+      backgroundImage: `url('${img}')`,
+    };
 
     return (
       <div
-        style={this.outerDivStyle}
+        style={outerDivStyle}
         onMouseOver={this.handleMouseOver}
         onMouseOut={this.handleMouseOut}
         onMouseMove={this.handleMouseMovement}
@@ -105,12 +87,12 @@ class Zoom extends Component {
           style={{
             ...transform,
             ...this.innerDivStyle,
-            transform: zoom ? `scale(${zoomScale})` : 'scale(1.0)',
+            transform: zoom ? `scale(${zoomScale})` : "scale(1.0)",
           }}
           className={styles.zoomImg}
         />
       </div>
-    )
+    );
   }
 }
 
@@ -125,10 +107,10 @@ Zoom.propTypes = {
   width: PropTypes.number.isRequired,
   /** The time (in seconds) that will take to scale your image. */
   transitionTime: PropTypes.number,
-}
+};
 
 Zoom.defaultProps = {
   transitionTime: 0.1,
-}
+};
 
-export default Zoom
+export default Zoom;