Installation

Note: Version 2.0.0 introduces React hooks and requires React v16.8.0 or above. To use this package with older versions of React, install with npm install react-inner-image-zoom@1.3.0 or yarn add react-inner-image-zoom@1.3.0 instead of the instructions below.

NPM

npm install react-inner-image-zoom

Yarn

yarn add react-inner-image-zoom

TypeScript

For TypeScript users, type definitions are available through DefinitelyTyped and can be installed with:

npm install --save-dev @types/react-inner-image-zoom

Styling

Download

Grab the raw CSS from Github to use however you see fit:

styles.css

or the minified version:

styles.min.css

Import

If your setup supports it, import the CSS directly from your node_modules:

import 'react-inner-image-zoom/lib/InnerImageZoom/styles.css';

or the minified version:

import 'react-inner-image-zoom/lib/InnerImageZoom/styles.min.css';

Usage

Import and render the component:

import InnerImageZoom from 'react-inner-image-zoom';

...

<InnerImageZoom src="/path/to/image.jpg" zoomSrc="/path/to/zoom-image.jpg" />

Props

• src (String): Required. URL for the original image.
• sources (Array): A list of image sources for using the picture tag to serve the appropriate original image (see below for more details).
• width (Number): Width attribute for original image.
• height (Number): Height attribute for original image.
• hasSpacer (Boolean): Default false. If true, gets the original image's aspect ratio based on the width and height props and creates a spacer to prevent cumulative layout shift.
• imgAttributes (Object): Img and global attributes for the original image (excluding src, width, height, and style which are set elsewhere). The imgAttributes keys should follow the React DOM element naming conventions.
• zoomSrc (String): URL for the larger zoom image. Falls back to original image src if not defined.
• zoomScale (Number): Default 1. Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).
• zoomPreload (Boolean): Default false If set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave.
• moveType (String): Default pan. Accepts pan or drag options. The user behavior for moving zoomed images on non-touch devices.
• zoomType (String): Default click. Accepts click or hover options. The user behavior for triggering zoom. When using hover, combine with zoomPreload to avoid flickering on rapid mouse movements.
• fadeDuration (Number): Default 150. Fade transition time in milliseconds. If zooming in on transparent images, set this to 0 for best results.
• fullscreenOnMobile (Boolean): Default false. Enables fullscreen zoomed image on touch devices below a specified breakpoint.
• mobileBreakpoint (Number): Default 640. The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true.
• hideCloseButton (Boolean): Default false. Hides the close button on touch devices. If set to true, zoom out is triggered by tap.
• hideHint (Boolean): Default false. Hides the magnifying glass hint.
• className (String): Custom classname for styling the component.
• afterZoomIn (Function): Function to be called after zoom in.
• afterZoomOut (Function): Function to be called after zoom out.

Sources

This prop accepts an array of objects which it uses to create a picture tag and source elements. The component looks for the following optional properties and you can find additional details here:

• srcSet (String): Srcset attribute for source tag.
• sizes (String): Sizes attribute for source tag.
• media (String): An attribute containing a media condition for use with the srcset.
• type (String): An image MIME type. This is useful for using newer formats like WebP.