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;
  }
}

Wonderful, thank you!

Seems like the latest gatsby-image update somehow breaks this mechanism.

@xmflsct Hey, could you provide more details about the error you get? I can confirm it is still working for me.
Although my implementation is a bit different - https://github.com/MantasMikal/eob-academy/blob/master/web/src/components/Common/Zoomable/index.jsx

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 react-medium-image-zoom@5.0.2-beta.0 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