aaronlifton/react-simple-image-zoom

Simple image zoom component for react

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

react-simple-image-zoom's Issues

The Module Is not Working

Hi, I am Using Next js 12. 2 with Typescript and trying to use the module to Zoom the Image but I am getting the below error whenever I Import that in Component. Let Me Help Regarding This.
I have attached the image of Error that Window is not Defined

Error: Can't resolve 'ReactDOM' in 'node_modules/react-simple-image-zoom/dist'

Hi,

I'm getting this error when attempting to use ImageZoom in my project

./node_modules/react-simple-image-zoom/dist/ReactSimpleImageZoom.js
Module not found: Error: Can't resolve 'ReactDOM' in '/myproject/node_modules/react-simple-image-zoom/dist'
 @ ./node_modules/react-simple-image-zoom/dist/ReactSimpleImageZoom.js 1:102-121

It seems like it has something to do with case-sensitive-paths-webpack-plugin (which I don't use in my project) and externals definition in webpack.config.js
https://github.com/aaronlifton2/react-simple-image-zoom/blob/aa0b5a9376a3c7501c9a63154581d588f1272d1a/webpack.config.js#L27

My development webpack config is the following

const merge = require('webpack-merge');
const environment = require('./environment');
const FlowWebpackPlugin = require('flow-webpack-plugin');

const devConfig = {
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          emitWarning: true,
        },
      },
    ],
  },
  plugins: [
    new FlowWebpackPlugin({
      reportingSeverity: 'warning',
      flowPath: require.main.require('flow-bin'),
      flowArgs: ['--color=always', 'frontend'],
    }),
  ],
};

module.exports = merge(environment.toWebpackConfig(), devConfig);

Can you please advice how to work around this problem?