I am using react-slick-slider where each carousel image is a react-image-magnify component. I get inconsistent behavior where an image will work (zooming on hover), but then sometimes when changing images, the cursorOffset coordinates will become invalid and only zoom in on the top right of the image regardless of where I move the mouse. The same image works if I go to a different carousel image and back again. When the zoom functionality works, the coordinates are { x: 111, y: 111 } and are { x: 111, y: NaN } when it doesn't work. I've tried manually correcting the coordinates by initially setting it to the correct values and even using a useEffect hook to correct it when it becomes invalid, but the y coordinate still becomes NaN. Any ideas on how I can get this behavior fixed? Here is a simplified version of my component.
const [cursorOffset, setCursorOffset] = useState({ x: 111, y: 111 });
useEffect(() => {
const xIsValid = typeof cusorOffset.x === 'number';
const yIsValid = typeof cusorOffset.y === 'number';
if (!xIsValid || !yIsValid) {
setCursorOffset({ x: 111, y: 111 });
}
}, [cursorOffset]);
<ReactImageMagnify
className={classes.zoomImage}
imageProps={{
alt,
isFluidWidth: true,
sizes,
src,
srcSet
}}
magnifiedImageProps={{
alt,
height: zoomHeight,
src: zoomSrc,
srcSet,
sizes,
width: Math.min(zoomWidth, zoomHeight)
}}
lensProps={{ cursorOffset }}
/>
I am using react-slick-slider where each carousel image is a react-image-magnify component. I get inconsistent behavior where an image will work (zooming on hover), but then sometimes when changing images, the cursorOffset coordinates will become invalid and only zoom in on the top right of the image regardless of where I move the mouse. The same image works if I go to a different carousel image and back again. When the zoom functionality works, the coordinates are { x: 111, y: 111 } and are { x: 111, y: NaN } when it doesn't work. I've tried manually correcting the coordinates by initially setting it to the correct values and even using a useEffect hook to correct it when it becomes invalid, but the y coordinate still becomes NaN. Any ideas on how I can get this behavior fixed? Here is a simplified version of my component.