react-cursor-zoom


A react component that uses a high-res source image to produce a zoom window on mouse hover

Based on lelandrichardson/react-image-magnifier

Demo

Here

Installation

npm install react-cursor-zoom --save

Usage

``jsx
import CursorZoom from 'react-cursor-zoom';

var App = React.createClass({
render: function() {
return (
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

$3

> Required

{ src, width, height }

The inline image that will be used as a reference for cursor zoom

$3

> Required

{ src, width, height }

The high-res image to be used on hover

$3

> Optional : default { x: 0, y: 0 }

{ x: 0, y: 0 } or { x, y }

$3

> Optional : default 200

Number`

The size of the zoom window