images

A React component for zooming images

Dec 31, 2020
A React component for zooming images

react-inner-image-zoom

A React component for magnifying an image within its original container. The zoom behavior is triggered on click and the image can be moved by dragging on touch devices and by either dragging or hover panning on non-touch devices. The component supports responsive images and optional fullscreen zoom on mobile.

View Demo View Github

Installation

NPM

npm install react-inner-image-zoom

Yarn

yarn add react-inner-image-zoom

Styling

I was originally importing the CSS directly into the component but I've recently realized that makes too many assumptions about the wider build process. You can now download the raw CSS file at:

/src/InnerImageZoom/styles.css

or the minified raw minified version at:

/src/InnerImageZoom/styles.min.css

to include however you see fit. Or, if your setup supports it, import the files directory from your node_modules using:

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

or:

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" />

This is the simplest usage. For additional examples, visit the demo page.

Props

PropTypeDefaultDescription
srcString(Required) URL for the original image.
srcSetStringDefault srcset attribute for a responsive original image.
sizesStringDefault sizes attribute for use with srcset.
sourcesArrayA list of image sources for using the picture tag to serve the appropriate original image (see below for more details).
zoomSrcStringURL for the larger zoom image. Falls back to original image src if not defined.
zoomScaleNumber1Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).
altStringAlternative text for the original image.
moveTypeStringpanpan or drag. The user behavior for moving zoomed images on non-touch devices.
zoomTypeStringclickclick or hover. The zoom behavior for images.
fadeDurationNumber150Fade transition time in milliseconds. If zooming in on transparent images, set this to 0 for best results.
fullscreenOnMobileBooleanfalseEnables fullscreen zoomed image on touch devices below a specified breakpoint.
mobileBreakpointNumber640The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true.
classNameStringCustom classname for styling the component.
afterZoomInFunctionFunction to be called after zoom in.
afterZoomOutFunctionFunction to be called after zoom out.
startsActivebooleanif set to true, sets the initial value of isActive to true.

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 on responsive images here:

PropTypeDefaultDescription
srcSetStringSrcset attribute for source tag.
sizesStringSizes attribute for source tag.
mediaStringAn attribute containing a media condition for use with the srcset.
typeStringAn image MIME type. This is useful for using newer formats like WebP.

GitHub

Recommended