Enea Xharja Logo

Medium zoom-effect in Gatsby

Install the react-medium-image-zoom package:

bash
1npm i react-medium-image-zoom

Create a zoomedImage.js component:

js
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}
© 2021 Enea Xharja