How I Added Medium.com Style Image Zoom to My Blog
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 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
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.
npm install react-medium-image-zoom
Step 2 - Using the library
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
Voila! That's all it takes to Zoom anything in your react app. This library works for anything, even
<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!