What is a react zoom image?

While checking out images on a photo gallery or on an eCommerce website, you may feel like zooming the image so as to obtain a clear view of the particular area. Here, we use the react image zoom feature so that we can achieve the required functionality. This feature is particularly used to display an image that too in an expanded view. When the user hovers or sometimes on click as well, we get an expanded view of the image. Basically, there are in total 15 versions of this function are available.

Components of React image zoom:

Below are some of the excellent components in react image zoom.

React Map Interaction:

This feature basically adds maps like zooming or panning on any react element. Both touch devices and mouse devices can work with this feature. While using a touchpad, to zoom an image it should be pinched. To pan an image we need to drag it. In the case of a mouse or a trackpad, we must scroll the wheel so as to obtain a zoomed image. And we must drag the mouse so as to pan the image.

 

React Zoom Pan Pinch:

It supports a simple zoom pan, and pinch on numerous markup language dom components such as pictures and divs.

 

React Image Magnify:

This is also one of the responsive react image zoom components for touchpad and mouse. In-place and side-by-side image enlargement, positive or negative space guide lens options, interaction hint, configurable enlarged image dimensions, optional enlarged image external render, hover intent, long pressure gesture, Fade transitions, base react-slick carousel support  are some of the feature we can find in React Image magnify.

React Img Zoom:

It is a react component that zooms an image on hover.

React Image Zoom:

We use this component majorly in browsers so as to get a zoomed image. To obtain a zoomed image simply hover the mouse.

 

React Pinch Zoom Pan:

This is a react component that enables us to add pinch-zoom and pan the zoomed image feature. To use it on a desktop, firstly, you need to hold down the Alt-Key. After that, just drag the mouse down from the centre of inner content onto the edges.

 

React SVG Pan zoom:

It adds pan and zoom options to Svg.

 

React Prismazoom:

It enables pan and zoom features to react using CSS transformations.

 

React Medium Image Zoom:

It provides Medium.com style image zoom for react. This is a library that React.js of Medium.com’s zoom image implements. It allows low resolution and high-resolution images to work together so as to obtain zoomed images. It works irrespective of parent elements that have overflow whether it be hidden or parents with transform properties.   

React Responsive Pinch Zoom:

It allows zooming and panning an image or canvas on both mobile and desktop. Both min and max settings are easy to obtain with the help of this feature.

Installation and usage of Image Zoom:

Install:

We can install React image zoom with the help of npm.

npm install react-image-zoom–save

 

Prop Types:

  • width: This feature basically assigns width to an image. It is extremely important to know that the value must be a number. (required)
  • height: It determines the height of the image. Like width, value must be a number. (Optional)
  • zoomWidth: This describes the width of the zoomed image. It’s again a number. zoomHeight is the same as the height of the original image. (Optional)
  • img: Uses the URL of the source image if the container does not contain an element as a tag. It should be a string.
  • scale: This is the zoom scale. If we don’t provide the scale then it’ll basically calculate the natural size of that image.
  • offset: It is used for zoomed image offset. Requires a vertical number and a horizontal number. 
  • zoomStyle: Basically, it applies custom styling to the zoomed image. 
  • zoomLensStyle: Here, it simply applies custom styling to the zoom lens.
  • zoomPosition: It defines the position of the zoom image. Its attributes are basically top, left, bottom, original and right. By default it applies right.

 

 

Leave a comment