react-image-zooms

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

Usage no npm install needed!

<script type="module">
  import reactImageZooms from 'https://cdn.skypack.dev/react-image-zooms';
</script>

README

react-image-zooms

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

npm version npm version

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.