Image zoom in ReactJS

Today we will show you how to implement the image zoom in ReactJS. When you are working with any e-commerce site at that time we have to implement image zoom effect in the product details page so the user can see the image details.

Image zoom in ReactJS, Image zoom effect on hover in React JS, React simple image zoom, Implement magnify image functionality in React.js with example, Zoom in and out on image in React.js, React image hover effects.

Checkout more articles on ReactJS

In this article, we will create the demo as a product details page which looks like an e-commerce site. Inside that we will implement the image zoom functionality and for that we will install the npm package.

1. Set up react application

Let's start with creating the simple react application with the help of the create-react-app. If you don’t know about how to create a react application then refer the below link.

Create React Application

2. Install npm dependency

Here we'll use react-image-magnify npm package to manage the zoom effect for image. Run below command to install it.

npm i react-image-magnify

With the help of it we can set the large and small both images to make it work also plugin is providing more functionality container style, lens style, scale property, etc. You can refer to the above link for more information.

3. Implement image magnify effect

Let's start with the simple page design which will display the same as the product details page of the e-commerce site.

App.js

import React from 'react';
import product from './product.jpg'

function App() {
  return (
    <div className="container mt-4">
      <h2>Product details</h2>
      <div className="row mt-4">
        <div className="col-md-5">
          <img src={product} alt="Phasellus laoreet" width="100%" />
        </div>
        <div className="col-md-7">
          <a className="mb-3 d-block" href="https://www.cluemediator.com">Clue Mediator</a>
          <p className="title">Phasellus laoreet</p>
          <p className="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet nisi aliquet, tincidunt metus eget, bibendum dui. Phasellus a hendrerit lectus, sit amet porttitor enim. Duis convallis eu erat quis sodales. Vestibulum pharetra sagittis nisl. Nullam a arcu ac quam vestibulum ultricies sed vel quam. Fusce ac malesuada nibh. Suspendisse facilisis ex eu ligula vulputate porttitor. Vestibulum vitae aliquet ligula, quis viverra sem. Nullam at ligula nec enim tempor luctus. Nunc et magna ut magna fringilla fermentum vestibulum vitae ex. Morbi tempus enim dolor, quis vehicula odio feugiat non.</p>
          <div className="options">
            <p>Vivamus in auctor lorem</p>
            <input type="button" value="Lorem" className="btn btn-outline-secondary mr-2" />
            <input type="button" value="ipsum" className="btn btn-outline-secondary mr-2" />
            <input type="button" value="aliquet" className="btn btn-outline-secondary mr-2" />
          </div>
          <div className="add-cart">
            <p className="float-left mr-3">$180</p>
            <input type="button" value="Add to cart" className="btn btn-danger float-left" />
            <div className="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

index.css

/* product details page style */
p.title {
  font-size: 28px;
  color: #bc4141;
}

p.desc {
  color: #777;
  font-size: 13px;
}

.options {
  border-top: 1px solid #eee;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.add-cart p {
  font-size: 28px;
  color: #444;
  margin-right: 15px;
}

Now let's implement the magnify effect. You have to just replace your image code with the new code of the npm package.

import React from 'react';
import product from './product.jpg'

function App() {
...
...
		<div className="col-md-5">
          <img src={product} alt="Phasellus laoreet" width="100%" />
        </div>
...
...
}

export default App;

import React from 'react';
import ReactImageMagnify from 'react-image-magnify';
import product from './product.jpg'

function App() {
  const imageProps = {
    smallImage: {
      alt: 'Phasellus laoreet',
      isFluidWidth: true,
      src: product
    },
    largeImage: {
      src: product,
      width: 1200,
      height: 1800
    },
    enlargedImageContainerStyle: { background: '#fff', zIndex: 9 }
  };
  return (
    <div className="container mt-4">
      <h2>Product details</h2>
      <div className="row mt-4">
        <div className="col-md-5">
          <ReactImageMagnify {...imageProps} />
        </div>
...
...
      </div>
    </div>
  );
}

export default App;

4. Output

Run project and check the output.

Output - Image zoom in ReactJS - Clue Mediator

Demo & Source Code

Github Repository StackBlitz Project