A responsive image zoom component designed for shopping sites

react-image-magnify

A responsive React image zoom component for touch and mouse.

Designed for shopping site product detail.

Supports in-place and side-by-side image enlargement.

Supports react-slick carousel.

Features tinted guide lens, interaction hint, hover intent, long-press gesture, and fade transitions.

Demo

Basic Example

Integration with react-slick carousel

Enlarged Image Container Dimensions

External Enlarged Image

Experiment with react-image-magnify live on CodePen.
Use the Change View button to select editing mode or for different layout options.
Use the Fork button to save your changes.

Installation

npm install --save react-image-magnify

Usage

If you are upgrading from v1x to v2x, please see the release notes.

import ReactImageMagnify from 'react-image-magnify';
...
<ReactImageMagnify {...{
    smallImage: {
        alt: 'Wristwatch by Ted Baker London',
        isFluidWidth: true,
        src: watchImg1200,
        srcSet: [
            `${watchImg687} 687w`,
            `${watchImg770} 770w`,
            `${watchImg861} 861w`,
            `${watchImg955} 955w`
        ].join(', '),
        sizes: '(min-width: 480px) 30vw, 80vw'
    },
    largeImage: {
        alt: '',
        src: watchImg1200,
        width: 1200,
        height: 1800
    }
}} />
...

Props API

Desktop and Touch

Mouse Specific

Touch Specific

Small Image

{
    alt: String,
    isFluidWidth: Boolean, (default false)
    src: String, (required)
    srcSet: String,
    sizes: String,
    width: Number, (required if isFluidWidth is not set)
    height: Number, (required if isFluidWidth is not set)
    onLoad: Function,
    onError: Function
}

Large Image

{
    alt: String,
    src: String, (required)
    srcSet: String,
    sizes: String,
    width: Number, (required)
    height: Number, (required)
    onLoad: Function,
    onError: Function
}

Example Project

git clone https://github.com/ethanselzer/react-image-magnify.git
cd react-image-magnify
yarn
yarn run build
cd example
yarn
yarn start

If your default browser does not start automatically, open a new browser window and go to localhost:3000

Development

git clone https://github.com/ethanselzer/react-image-magnify.git
cd react-image-magnify
yarn
npm run #See available commands

GitHub