Easy way to zoom gatsby-image with react-medium-image-zoom

ImageZoom.jsx

// Demo https://guste.design/gallery/

// Install https://www.npmjs.com/package/react-medium-image-zoom

// ImageZoom.jsx

import React from 'react'
import Image from 'gatsby-image'
import Zoom from 'react-medium-image-zoom'

import styles from './ImageZoom.module.css'
import 'react-medium-image-zoom/dist/styles.css'

const wrapperStyle = {
  width: '100%',
  height: '100%'
}

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

export default ImageZoom


// ImageZoom.module.scss

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

I did not dig deeper, but I just to turn to the source medium-zoom instead. See https://github.com/xmflsct/terradelft-website/blob/master/src/components/template-object/object-images.jsx#L12-L20.

It works ! 🎉

I was looking for a simple way to get a Medium zoom on Gatsby images.
After having tried both Gatsby plugins and having searched a lot, THIS, is the solution.

@MantasMikal Thank you ❤️

I'm late to the game, but for what it's worth, I believe I've fixed this for gatsby-plugin-image in [email protected] and expect to release it in 5.0.2 soon. Here's the issue for tracking purposes: rpearce/react-medium-image-zoom#347

Edit: 5.0.2 is now out there