How I Added Style Image Zoom to My Blog

Elvis Duru

Elvis Duru / August 26, 2021 

2 min read --- views


In this guide, I will show you how I was able to add a very cool feature to my blog - the style image zoom. I'm sure if you've read any article on, you will know that you can Zoom images on click. At the end of this tutorial you would have learnt how to do the same in just a few lines of code. Let's dive right in!

Step 1 - Install react-medium-image-zoom

This library is a React.js implementation of's image zoom that allows for images to work together for a “zooming” effect and works regardless of parent elements that have overflow: hidden or parents with transform properties.


npm install react-medium-image-zoom

Step 2 - Using the library

Import the Zoom component and the library's CSS file, wrap whatever you want to be "zoomable" with this component, and the component will handle it's own state:

import React from 'react'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

const SomeComponent= () => (
      alt="some random image"

export default SomeComponent


Voila! That's all it takes to Zoom anything in your react app. This library works for anything, even <figure>, <picture>, <div> are valid. You can also use the Controlled component to zoom images. You can read more about that here.

I hope you enjoyed this tutorial. If you did, please don't forget to subscribe to my newsletter below for more like this. Thanks for reading!

Get the latest articles, in your inbox

Every couple of weeks, I share the best content from my blog. It's short, sweet, and practical. I'd love you to join. You may opt out at any time.