React component for show zoom in image on mouse hover.

Usage no npm install needed!

<script type="module">
  import reactMagicZoom from '';


This component don’t have a third part dependency. Work correct for touch devices.

Here you can see DEMO


For use this component you should put inside it node with <img> tab with fill src:


import React from ‘react’;
import ReactDOM from ‘react-com’;
import ReactMagicZoom from ‘react-magic-zoom’;

export class App extends React.Component {
    render() {
        return (
                    <img src={''} />

ReactDOM.render(<App/>, document.getElementById('app'));


// Type 'auto' - autosize cursor and reflection,
// 'donor' - not render
type: 'auto',

// Method for add subscriber
subscribeOnReflection= function(reflection){}

reflection: {
    // Value:   'left', 'right', 'top', 'bottom' - position of
    //                                              reflection
    //          Object {left: '10px', top: '10%'}
    position: 'left',

    // Value: @flaot - scale coefficient
    scale: 2,

    // reflection size in pixel, as default will be setter size of pictures
    size: {
        height: 100,
        width: 300