react-image-magnifier

    1.0.0 • Public • Published

    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

    Install

    npm i react-image-magnifier

    DownloadsWeekly Downloads

    9

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • intelligibabble