React image magnifier tutorial.
Create an Image Magnifier Component in ReactJs. With step-by-step instructions and code examples, you’ll learn how to enhance user experience by allowing them to zoom in on images for a closer look. Follow along to build your own customizable image magnifier component and elevate your web development skills!”
Step 1: Setting Up the Component Structure
First, let’s establish the basic structure of our image magnifier component. We’ll define the component function and set up its initial state.
function ImageMagnifier({
src,
width,
height,
magnifierHeight = 100,
magnifierWidth = 100,
zoomLevel = 1.5
}) {
const [[x, y], setXY] = useState([0, 0]);
const [[imgWidth, imgHeight], setSize] = useState([0, 0]);
const [showMagnifier, setShowMagnifier] = useState(false);
// Rest of the component code will be added in subsequent steps
}
Step 2: Managing Mouse Events
Next, let’s handle mouse events to control the display of the magnifier when hovering over the image.
src={src}
style={{ height: height, width: width }}
onMouseEnter={(e) => {
const elem = e.currentTarget;
const { width, height } = elem.getBoundingClientRect();
setSize([width, height]);
setShowMagnifier(true);
}}
onMouseMove={(e) => {
const elem = e.currentTarget;
const { top, left } = elem.getBoundingClientRect();
const x = e.pageX – left – window.pageXOffset;
const y = e.pageY – top – window.pageYOffset;
setXY([x, y]);
}}
onMouseLeave={() => {
setShowMagnifier(false);
}}
alt={“img“}
/>
Step 3: Rendering the Magnifier
Now, let’s add the magnifier element and style it based on the cursor position and image dimensions.
style={{
display: showMagnifier ? “” : “none“,
position: “absolute“,
pointerEvents: “none“,
height: `${magnifierHeight}px`,
width: `${magnifierWidth}px`,
top: `${y – magnifierHeight / 2}px`,
left: `${x – magnifierWidth / 2}px`,
opacity: “1“,
border: “1px solid lightgray“,
backgroundColor: “white“,
backgroundImage: `url(‘${src}‘)`,
backgroundRepeat: “no-repeat“,
backgroundSize: `${imgWidth * zoomLevel}px ${imgHeight * zoomLevel}px`,
backgroundPositionX: `${–x * zoomLevel + magnifierWidth / 2}px`,
backgroundPositionY: `${–y * zoomLevel + magnifierHeight / 2}px`
}}
></div>
We done it. Here is the full code and a demo:
import { useState } from ‘react‘;
const ImageMagnifier = ({
src,
className,
width,
height,
alt,
magnifierHeight = 150,
magnifierWidth = 150,
zoomLevel = 3
}) => {
const [showMagnifier, setShowMagnifier] = useState(false);
const [[imgWidth, imgHeight], setSize] = useState([0, 0]);
const [[x, y], setXY] = useState([0, 0]);
const mouseEnter = (e) => {
const el = e.currentTarget;
const { width, height } = el.getBoundingClientRect();
setSize([width, height]);
setShowMagnifier(true);
}
const mouseLeave = (e) => {
e.preventDefault();
setShowMagnifier(false);
}
const mouseMove = (e) => {
const el = e.currentTarget;
const { top, left } = el.getBoundingClientRect();
const x = e.pageX – left – window.scrollX;
const y = e.pageY – top – window.scrollY;
setXY([x, y]);
};
return <div className=“relative inline-block“>
<img
src={src}
className={className}
width={width}
height={height}
alt={alt}
onMouseEnter={(e) => mouseEnter(e)}
onMouseLeave={(e) => mouseLeave(e)}
onMouseMove={(e) => mouseMove(e)}
/>
<div
style={{
display: showMagnifier ? ” : ‘none‘,
position: ‘absolute‘,
pointerEvents: ‘none‘,
height: `${magnifierHeight}px`,
width: `${magnifierWidth}px`,
opacity: ‘1‘,
border: ‘1px solid lightgrey‘,
backgroundColor: ‘white‘,
borderRadius: ‘5px‘,
backgroundImage: `url(‘${src}‘)`,
backgroundRepeat: ‘no-repeat‘,
top: `${y – magnifierHeight / 2}px`,
left: `${x – magnifierWidth / 2}px`,
backgroundSize: `${imgWidth * zoomLevel}px ${imgHeight * zoomLevel}px`,
backgroundPositionX: `${–x * zoomLevel + magnifierWidth / 2}px`,
backgroundPositionY: `${–y * zoomLevel + magnifierHeight / 2}px`,
}}
/>
</div>
};
export default ImageMagnifier;
import React from ‘react‘;
import ImageMagnifier from ‘./ImageMagnifier‘;
const App = () => {
return (
<div>
<ImageMagnifier
src=“../images/demo-img.jpg“
width={300}
height={200}
magnifierHeight={100}
magnifierWidth={100}
zoomLevel={2}
alt=“Sample Image“
/>
</div>
);
};
export default App;
Conclusion
And there you have it! We’ve successfully created a simple yet functional image magnifier component in React. Users can now hover over images to inspect them closely, thanks to our intuitive magnifier feature.
Feel free to customize and enhance this component further to suit your specific needs. Happy coding!
Hope you like it.
That’s it — thanks.
To read my other articles click here.
👋Hey there, Let’s connect on:
Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com
