Medium zoom-effect in Gatsby

Updated: September 2, 2020

Install the react-medium-image-zoom package:

npm i react-medium-image-zoom

Create a zoomedImage.js component:

zoomedImage.js

import React from "react";
import Image from "gatsby-image";
import Zoom from "react-medium-image-zoom";
import "react-medium-image-zoom/dist/styles.css";

const wrapperStyle = {
  width: "100%",
  height: "100%",
};

const ZoomedImage = (props) => {
  return (
    <Zoom>
      <Image style={wrapperStyle} {...props} />
    </Zoom>
  );
};

export default ZoomedImage;

Then, in your stylesheet:

zoomedImage.css

[data-rmiz-wrap="visible"],
[data-rmiz-wrap="hidden"] {
  width: 100%;
  height: 100%;
  display: block;
}