Medium zoom-effect in Gatsby

Install the react-medium-image-zoom package:

bash

1npm i react-medium-image-zoom

Create a zoomedImage.js component:

1import React from 'react';
2import Image from 'gatsby-image';
3import Zoom from 'react-medium-image-zoom';
4import 'react-medium-image-zoom/dist/styles.css';
5
6const wrapperStyle = {
7  width: '100%',
8  height: '100%',
9};
10
11const ZoomedImage = props => {
12  return (
13    <Zoom>
14      <Image style={wrapperStyle} {...props} />
15    </Zoom>
16  );
17};
18
19export default ZoomedImage;

Then, in your stylesheet:

css

1[data-rmiz-wrap='visible'],
2[data-rmiz-wrap='hidden'] {
3  width: 100%;
4  height: 100%;
5  display: block;
6}