0

The library is working well but I couldn't find a way to change the side where the zoom/lens appears when hovering on the image. It always appears on the right side.

I tried having a container with 100% width and flex-box moving the ReactImageMagnify at the flex-end (order) and I thought it would automatically appear on the left but it doesn't, it generates a div and it creates a scroll bar.

import React from 'react';

import ReactImageMagnify from 'react-image-magnify';

import styles from './Magnifier.module.scss';
const Magnifier = ({ image, magnifier, children }) => {
  return (
    <div className={styles.container}>
      {/* flex */}
      <div className={styles.first} />
      {magnifier ? (
        <div className={styles.magnifier}>
          <ReactImageMagnify
            {...{
              smallImage: {
                alt: 'Wristwatch by Ted Baker London',
                isFluidWidth: true,
                src: image.src,
              },
              largeImage: {
                src: image.src,
                width: 1900,
                height: 2600,
              },
            }}
          />
        </div>
      ) : (
        children
      )}
    </div>
  );
};

export default Magnifier;

Neto C
  • 1
  • 1

0 Answers0