React simple image zoom

A simple image zoom component

Demo

• https://aaronlifton.github.io/react-simple-image-zoom/

Install

mgr	cmd
npm	npm install --save react-simple-image-zoom
yarn	yarn add react-simple-image-zoom

Usage

import { ImageZoom } from 'react-simple-image-zoom';
const largeCatImg = 'https://www.nationalgeographic.com/content/dam/animals/thumbs/rights-exempt/mammals/d/domestic-cat_thumb.ngsversion.1472140774957.adapt.1900.1.jpg';

const App = () =>
  <div id="app">
    <div style={{width: "540px", marginLeft: "20px", overflow: "hidden"}}>
      <ImageZoom
        portalId="portal"
        largeImgSrc={largeCatImg}
        imageWidth={540}
        imageHeight={540}
        zoomContainerWidth={540}
        activeClass="my-active"
        portalStyle={Object.assign(
          {...ImageZoom.defaultPortalStyle},
          {top: "140px"}
        )}
        zoomScale={1}
        responsive={true}
      >
        <img src={largeCatImg} alt="Cat image" width="100%"/>
      </ImageZoom>
    </div>

    <div id="portal" />
  </div>

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

See ./demo for a more detailed example.

Props

prop	required	type	description
children	yes	any	pass the source image in as a child element
portalId	yes	string	ID of the target portal element
largeImgSrc	no	string	optional high-res source to use for the zoom container
imageWidth	yes	number	width of the original image on the screen
imageHeight	no	number	optional, pass in an image height to use for calculations. otherwise this component will figure it out.
zoomContainerWidth	yes	number	width of the portal zoom
zoomContainerHeight	no	number	height of the portal zoom
activeClass	no	string	optional, default is 'active'. applies this class to the image container when zooming is active
portalStyle	no	React.CSSProperties	optional, override the style of the portal. To extend the default style, use ImageZoom.defaultPortalStyle
portalClassName	no	string	optional, sets className on the portal element
zoomScale	no	number	optional, default is 1. Determines the amount of zoom.
responsive	no	boolean	optional, default is null. Component will listen for window resize and adjust accordingly

Usage with react-slick

• For the magnifying glass to work, make sure you style .slick-side like this:

  .slick-side {
    position: relative;
  }

Development

• yarn run dev
• check http://localhost:8080/docs

Todo

• get component to work on mobile devices

License

Copyright © 2018 Aaron Lifton