From 339d7b74126363174aa3b58849acd9ac3c55bf65 Mon Sep 17 00:00:00 2001
From: Pitipat Srichairat <pitipat.dop@gmail.com>
Date: Wed, 22 Feb 2017 18:45:50 +0700
Subject: [PATCH] docs(clickToZoom): add image preview for clickToZoom

---
 README.md             | 1 +
 dev/containers/App.js | 2 +-
 src/index.js          | 7 ++++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index fcf6f10..3edf6e2 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,7 @@ all normal `<img />` props can be used
   - scale = 1, the image will cover the whole area precisely.
 - `clickToZoom` (Boolean: default = false) if true then user can click to zoomIn
 - `zoomInScale` determine value of zoomed-in scale when clickToZoom
+![img](http://i.giphy.com/3o84TYe7Y9yOFHFnIQ.gif)
 
 Note: If you do not provide resizeMode, `<BetterImg />` will just render normal `<img />`
 
diff --git a/dev/containers/App.js b/dev/containers/App.js
index 1c26e9b..2f48f8f 100644
--- a/dev/containers/App.js
+++ b/dev/containers/App.js
@@ -18,7 +18,7 @@ export default class App extends Component {
           &lt;BetterImg scale={1} focalPoint="50% 50%"/&gt;
         </pre>
         <BetterImg
-          src="/img/puppy-line.jpg"
+          src="/img/puppy.jpg"
           height={600}
           resizeMode="cover"
           scale={1}
diff --git a/src/index.js b/src/index.js
index c2ab1d5..d788ec0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -105,6 +105,8 @@ class BetterImg extends Component {
   state = {
     imgWidth: 0,
     imgHeight: 0,
+    imgLoaded: false,
+    imgClicked: false,
     currentZoomScale: this.props.scale,
     focalPoint: this.props.focalPoint,
     containerWidth: undefined,
@@ -119,6 +121,7 @@ class BetterImg extends Component {
     this.setState({
       imgWidth,
       imgHeight,
+      imgLoaded: true,
       containerHeight: this.props.height || imgHeight,
     });
 
@@ -160,12 +163,14 @@ class BetterImg extends Component {
       if (!this.state.isZoomedIn) {
         this.setState({
           isZoomedIn: true,
+          imgClicked: true,
           currentZoomScale: this.props.zoomInScale,
           focalPoint: `${pointX/containerWidth} ${pointY/containerHeight}`
         });
       } else {
         this.setState({
           isZoomedIn: false,
+          imgClicked: true,
           currentZoomScale: this.props.scale,
           focalPoint: 'center',
         });
@@ -221,8 +226,8 @@ class BetterImg extends Component {
       transform: `translate3d(${x}px, ${y}px, 0) scale(${scaleX}, ${scaleY})`,
       transformOrigin: '0% 0%',
     }
+    if (this.props.clickToZoom && this.state.imgClicked) imgStyle.transition = 'all .3s ease-out';
 
-    if (this.props.clickToZoom) imgStyle.transition = 'all .3s ease-out';
     const containerProps = {};
     if (this.props.clickToZoom) {
       containerProps.onClick = this.handleClick;