react-image-magnify

A React image magnification component for desktop and touch.

Supports arbitrary image sizes and fade-transitions. Scales magnification automatically.

Desktop displays side by side enlarged image view, with tinted control-image mask. Supports hover intent.

Touch displays in place enlarged image view. Supports press to pan. Does not interfere with scrolling.

Demo

Desktop

Touch

Status

Installation

npm install --save react-image-magnify

Usage

Desktop

import { ReactImageMagnify } from 'react-image-magnify';
...
<ReactImageMagnify {...{
    largeImage: {
        alt: 'Example description',
        src: 'https://example.com/large/image.jpg',
        width: 1200,
        height: 1800
    },
    smallImage: {
        alt: 'Example description',
        src: 'https://example.com/small/image.jpg',
        width: 400,
        height: 600
    }
}}/>
...

Touch

import { ReactImageMagnifyTouch } from 'react-image-magnify';
...
<ReactImageMagnifyTouch {...{
    largeImage: {
        alt: 'Example description',
        src: 'https://example.com/large/image.jpg',
        width: 1200,
        height: 1800
    },
    smallImage: {
        alt: 'Example description',
        src: 'https://example.com/small/image.jpg',
        width: 400,
        height: 600
    }
}}/>
...

Props API

Desktop and Touch

Prop	Type	Required	Default	Description
smallImage	Object	Yes		Small image information. See Image Struct below.
largeImage	Object	Yes		Large image information. See Image Struct below.
className	String	No		CSS class applied to root container element.
style	Object	No		Style applied to root container element.
fadeDurationInMs	Number	No	300	Milliseconds duration of magnified image fade in/fade out.
imageClassName	String	No		CSS class applied to small image element.
imageStyle	Object	No		Style applied to small image element.
enlargedImageContainerClassName	String	No		CSS class applied to enlarged image container element.
enlargedImageContainerStyle	Object	No		Style applied to enlarged image container element.
enlargedImageClassName	String	No		CSS class applied to enlarged image element.
enlargedImageStyle	Object	No		Style applied to enlarged image element.

Desktop Only

Prop	Type	Required	Default	Description
hoverDelayInMs	Number	No	250	Milliseconds to delay hover trigger.
hoverOffDelayInMs	Number	No	150	Milliseconds to delay hover-off trigger.
lensStyle	Object	No		Style applied to tinted lens.
enlargedImagePosition	String	No	beside	Enlarged image position. Can be 'beside' or 'over'.

Touch Only

Prop	Type	Required	Default	Description
isActivatedOnTouch	Boolean	No	false	Activate magnification immediately on touch. May impact scrolling.
pressDuration	Number	No	500	Milliseconds to delay press activation (long touch).
pressMoveThreshold	Number	No	5	Pixels of movement allowed during press activation.
enlargedImagePosition	String	No	over	Enlarged image position. Can be 'beside' or 'over'.

Image Struct

{
    alt: String,
    src: String,
    srcSet: String,
    width: Number,
    height: Number
}

Support

Please open an issue.

Development

git clone https://github.com/ethanselzer/react-image-magnify.git
cd react-image-magnify
npm install

See available commands:

npm run

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

License

MIT