From 06d72268ce217233bae87e2f1da610d0a8e1694e Mon Sep 17 00:00:00 2001
From: Pitipat Srichairat <pitipat.dop@gmail.com>
Date: Wed, 22 Feb 2017 18:00:36 +0700
Subject: [PATCH] docs(clickToZoom): update document clickToZoom

---
 README.md    | 4 +++-
 src/index.js | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 76b803d..fcf6f10 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,9 @@ all normal `<img />` props can be used
   - `{x} {y}`: (eg. `focalPoint=".75 .5"` or `focalPoint="75% 50%"`) focus on the point `x%` from the left and `y%` from the top.
 ![img](http://i.imgur.com/XY3jVPX.png)
 - `scale`: (work if resizeMode = 'cover') if provided, the image will scale from container width. (Not image original width)
-  - scale = 1, the image will cover the whole area perfectly
+  - 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
 
 Note: If you do not provide resizeMode, `<BetterImg />` will just render normal `<img />`
 
diff --git a/src/index.js b/src/index.js
index 8706f18..c2ab1d5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -222,15 +222,18 @@ class BetterImg extends Component {
       transformOrigin: '0% 0%',
     }
 
-    if (this.props.clickToZoom) imgStyle.transition = 'all .4s ease-out';
-
+    if (this.props.clickToZoom) imgStyle.transition = 'all .3s ease-out';
+    const containerProps = {};
+    if (this.props.clickToZoom) {
+      containerProps.onClick = this.handleClick;
+    }
     const imgProps = pick(this.props, imgAttrs);
     return (
       <div
         className="better-img"
         style={wrapperStyles}
         ref={container => this.container = container}
-        onClick={this.handleClick}
+        {...containerProps}
       >
         <img
           {...imgProps}