React component for desktop browsers for image zoom on mouse hover Sample in 2020

React component for desktop browsers for image zoom on mouse hover Sample in 2020


tutorials -

react-image-zoom

React component for desktop browsers for image zoom on mouse hover.

Install

npm install react-image-zoom --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import ReactImageZoom from 'react-image-zoom';

const props = {width: 400, height: 250, zoomWidth: 500, img: "1.jpg"};
ReactDOM.render(<ReactImageZoom {...props} />, document.getElementById('react-app'));

propTypes

  • width (number) - width of the source image (required)
  • height (number) - height of the source image. If not provided, browser calculated
    height is used (optional).
  • zoomWidth (number) - width of the zoomed image. Zoomed image height equals source image height(optional if scale param is provided)
  • img (string) - url of the source image. Provided if container does not contain img element as a tag(optional)
  • scale (number) - zoom scale. if not provided, scale is calculated as natural image size / image size, provided in params (optional if zoomWidth param is provided)
  • offset (object) - {vertical: number, horizontal: number}. Zoomed image offset (optional)
  • zoomStyle (string) - custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')(optional)
  • zoomLensStyle (string) custom style applied to to zoom lents (i.e. 'opacity: 0.4;background-color: gray;')
  • zoomPosition (string) - position of zoomed image. It can be: top, left, bottom, original or the default right.

RouteMap

  • [ ] add sourceImg, zoomedImg properties to make it possible to use different images for source and zoomed images

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff