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;