react-image-zooms

A click on the react component of the zoom in image Demo

Installation

npm i -S react-image-zooms

Usage

You need to limit the width and height of the image, it's recommended to use a sized container wrapper component.

.image-box {
  width: 200px;
  height: 200px;
}
 
.image-box img {
  width: 100%;
  height: 100%;
}

import ImageZooms from 'react-image-zooms';
import 'react-image-zooms/lib/image-zooms.css';
 
<div className="image-box">
  <ImageZooms src="some image url" duration={300} imageBoxSize={600} />;
</div>;

Props

You may want to specify props:

• src: required - online image url
• duration: optional - zoom in image takes time, default: 300
• imageBoxSize: optional - the maximum width and height of the enlarged image, default:500

License

Licensed under MIT license.