Medium zoom-effect in Gatsby

Install the react-medium-image-zoom package:

npm i react-medium-image-zoom

Create a zoomedImage.js component:

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:

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

Updated on September 02, 2020

Tagged with: gatsby, snippets