Build an Image Magnifier Component in ReactJs
Tags: javascript, development, react, magnifier
Published: 2024-05-01 11:02:37

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.


```javascript
import React, { useState } from 'react';

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.

```javascript
<img
  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.

```javascript
<div
  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:**

```javascript
// ImageMagnifier.js
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;
```

```javascript
// App.js
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;
```

![Example of Building an Image Magnifier Component in ReactJs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6n19zqoxs7f807gkrj9.gif)


**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](https://dev.to/margishpatel).

---

👋Hey there, Let’s connect on:

Linkdin: [Margish Patel](https://www.linkedin.com/in/margish-patel-63843b1b5)
Twitter: [@margish96patel](https://twitter.com/margish96patel?t=ruk_O0DrnioOU_yQmHcWbw&s=09)
Email: [babariyamargish97@gmail.com](babariyamargish97@gmail.com)