Skip to content

Commit

Permalink
docs(clickToZoom): update document clickToZoom
Browse files Browse the repository at this point in the history
  • Loading branch information
pitipatdop committed Feb 22, 2017
1 parent 6c6e433 commit 06d7226
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 4 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 />`

Expand Down
9 changes: 6 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit 06d7226

Please sign in to comment.