How I Added Medium.com Style Image Zoom to My Blog

Introduction

In this guide, I will show you how I was able to add a very cool feature to my blog - the Medium.com style image zoom. I'm sure if you've read any article on medium.com, 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 Medium.com'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.

Installation

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= () => (
  <Zoom>
    <img
      alt="some random image"
      src="/path/to/somerandomimage.jpg"
      width="500"
    />
  </Zoom>
)

export default SomeComponent

Conclusion

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!