Merge pull request #158 from laurentmmeyer/develop

F!!: add zoom feature on images to display these fullscreen
styxlab · Jan 10, 2022 · 5f32aae · 5f32aae · vercel · Jan 10, 2022
2 parents 2557d38 + 118cf01
commit 5f32aae
Show file tree

Hide file tree

Showing 3 changed files with 484 additions and 167 deletions.
diff --git a/components/NextImage.tsx b/components/NextImage.tsx
@@ -2,6 +2,9 @@ import Image from 'next/image'
 import { ComponentPropsWithNode } from 'rehype-react'
 import { Node } from 'unist'
 import { Dimensions } from '@lib/images'
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
+
 
 interface PropertyProps {
   src: string
@@ -24,7 +27,9 @@ export const NextImage = (props: ComponentPropsWithNode) => {
   return (
     <div className="next-image-wrapper">
       <div {...{ className }}>
-        <Image src={src} {...imageDimensions} {...{ className }} alt="" />
+        <Zoom>
+          <Image src={src} {...imageDimensions} {...{ className }} alt="" />
+        </Zoom>
       </div>
     </div>
   )

diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "react-dom": "17.0.2",
     "react-gist": "^1.2.4",
     "react-is": "^17.0.2",
+    "react-medium-image-zoom": "^4.3.5",
     "refractor": "^3.3.1",
     "rehype": "^11.0.0",
     "rehype-react": "^6.2.1",