varya / react-image-magnifier

A react component that accepts a high-res source image and produces a magnifier window on mouse hover over the part of the image the cursor is over

react-image-magnifier

A react component that accepts a high-res source image and produces a magnifier window on mouse hover over the part of the image the cursor is over

Demo

Usage

> npm install --save react-image-magnifier

var ImageMagnifer = require('react-image-magnifier');

var App = React.createClass({

    render () {
        return (
            <ImageMagnifier
                image={{
                    src: "img/beach-small.jpg",
                    width: 400,
                    height: 300
                }}
                zoomImage={{
                    src: "img/beach-large.jpg",
                    width: 1600,
                    height: 1200
                }}
                cursorOffset={{ x: 80, y: -80 }}
            />
        );
    }
});

API (props)

Prop	Required	Default	Type	Description
image	YES		{ src, width, height }	the src, size of the non-zoomed-in image
zoomImage	YES		{ src, width, height }	the src, size of the zoomed-in image
cursorOffset	NO	{ x: 0, y: 0 }	{ x, y }	the offset of the zoom bubble from the cursor
size	NO	200	Number	the size of the magnifier window