Package Exports

react-image-magnify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-image-magnify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-image-magnify

A React component displaying side by side enlarged image view, with tinted control-image mask.

Intended for desktop, but will be updated with touch experience soon.

Supports arbitrary image sizes. Scales magnification automatically.

Supports delaying hover and hover-off, which can help reduce unintentional triggering.

Installation

npm install --save react-image-magnify

Usage

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

Props API

className : String [optional] - A CSS class to be applied to the container element rendered by react-image-magnify.

style : Object [optional] - Style to be applied to the container element rendered by react-image-magnify.

hoverDelayInMs : Number [optional] - Milliseconds to delay hover trigger. Defaults to 250.

hoverOffDelayInMs : Number [optional] - Milliseconds to delay hover-off trigger. Defaults to 150.

fadeDurationInMs : Number [optional] - Milliseconds duration of magnified image fade in/fade out. Defaults to 300.

smallImage : Object - Image struct.

largeImage : Object - Image struct.

Image struct shape:

{
    alt: String,
    src: 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