Added react-medium-image-zoom (#33)

* Added react-medium-image-zoom

* Updated CHANGELOG.md

Author: alexvarko

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Products/WorldCoin State Replication:
   - Updated the relayer version in the replication guide;
 - Used `@docusaurus/plugin-ideal-image` for image optimization
+- Used `react-medium-image-zoom` to zoom images
 
 ## [2.0.5] - 23-02-2024
 

package.json

@@ -30,6 +30,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-live": "^4.1.5",
+    "react-medium-image-zoom": "4.4.3",
     "redocusaurus": "^2.0.0",
     "remark-emoji": "^4.0.1",
     "swiper": "^11.0.5"

src/components/IdealImage/index.tsx

@@ -1,17 +1,21 @@
 import Image, { Props as ImageProps } from '@theme/IdealImage'
 import React from 'react'
-
 import styles from './styles.module.css'
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
+
 
 export default function IdealImage({ img, alt, ...rest }: ImageProps) {
   return (
-    <Image
-      className={styles.idealImage}
-      // @ts-expect-error: `shouldAutoDownload` is not in the type definition
-      shouldAutoDownload={() => true}
-      img={img}
-      alt={alt}
-      {...rest}
-    />
+    <Zoom>
+      <Image
+        className={styles.idealImage}
+        // @ts-expect-error: `shouldAutoDownload` is not in the type definition
+        shouldAutoDownload={() => true}
+        img={img}
+        alt={alt}
+        {...rest}
+      />
+    </Zoom>
   )
 }

src/components/IdealImage/styles.module.css

@@ -2,3 +2,7 @@
   margin-bottom: var(--ifm-paragraph-margin-bottom);
 }
 
+[data-theme='dark'] [data-rmiz-overlay] {
+  background-color: rgba(50, 50, 50, 0.95) !important;
+}
+

yarn.lock

@@ -5334,6 +5334,11 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
+focus-options-polyfill@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/focus-options-polyfill/-/focus-options-polyfill-1.5.1.tgz#0f422580d9d1fb65651f2968b547032eb17dab3c"
+  integrity sha512-7yH20IePROHJLLbJvqqtsG420jE6DuukccapiB/WagtUpnc98r9NzHbX5rnjCDgdZqLgcqlzGjn+8l0Zb8Zf9w==
+
 follow-redirects@^1.0.0:
   version "1.15.5"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
@@ -9198,6 +9203,14 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+react-medium-image-zoom@4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-4.4.3.tgz#d5e3074becef7be4bfe35ebcd291eac462093bf5"
+  integrity sha512-I928Z6mEMRUup4CPa+XtASiSuFzdVb1ecztXpF7xAJddXv4XZSE4n5gleZNYCn5wEU1LQY5LiN4aNW4KgrOVIA==
+  dependencies:
+    focus-options-polyfill "1.5.1"
+    tslib "^2.4.0"
+
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -10577,7 +10590,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.6.0:
+tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==