chore: use react-medium-image-zoom

package.json

@@ -29,13 +29,13 @@
     "date-fns": "^4.1.0",
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.469.0",
-    "medium-zoom": "^1.1.0",
     "motion": "^11.16.4",
     "next": "^15.1.4",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-medium-image-zoom": "^5.2.13",
     "remark-gfm": "^4.0.0",
     "rss": "^1.2.2",
     "slash": "^5.1.0",

src/app/posts/_components/Image.tsx

@@ -1,9 +1,7 @@
 "use client";
 import { omit } from "@debbl/utils";
-import MediumZoom from "medium-zoom";
 import NextImage from "next/image";
-import { useEffect, useRef } from "react";
-import type { Zoom } from "medium-zoom";
+import Zoom from "react-medium-image-zoom";
 import type { StaticImageData } from "next/image";
 import type { ComponentProps } from "react";
 
@@ -22,21 +20,19 @@ export function Image({
 
   const imageProps = omit(staticImgData.props, ["blurWidth", "blurHeight"]);
 
-  const imgRef = useRef<HTMLImageElement>(null);
-  const zoom = useRef<Zoom>(null);
-
-  useEffect(() => {
-    zoom.current = MediumZoom(imgRef.current!);
-  }, []);
-
   return (
     <picture className="flex justify-center px-12">
-      <NextImage
-        key={imageProps.src}
-        ref={imgRef}
-        {...imageProps}
-        alt="image"
-      />
+      <Zoom
+        zoomMargin={40}
+        zoomImg={{
+          src: imageProps.src,
+          alt: "",
+        }}
+        ZoomContent={(data) => <>{data.img}</>}
+        wrapElement="span"
+      >
+        <NextImage key={imageProps.src} {...imageProps} alt="image" />
+      </Zoom>
     </picture>
   );
 }

src/styles/image-zoom.css

@@ -1,17 +1,95 @@
 /* image-zoom */
-.medium-zoom-overlay {
-  z-index: 99;
-
-  @apply !bg-zinc-50 dark:!bg-neutral-900;
-}
-.medium-zoom-image {
-  border-radius: 0.5rem;
-  transition: border-radius 0.3s ease-in-out;
-}
-.medium-zoom-image.medium-zoom-image--opened {
-  border-radius: 0;
-
-  z-index: 100;
-  opacity: 1;
-  transition: all 0.5s ease-in-out;
+[data-rmiz-ghost] {
+  position: absolute;
+  pointer-events: none;
+}
+[data-rmiz-btn-zoom],
+[data-rmiz-btn-unzoom] {
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  border: none;
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  color: #fff;
+  height: 40px;
+  margin: 0;
+  outline-offset: 2px;
+  padding: 9px;
+  touch-action: manipulation;
+  width: 40px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+[data-rmiz-btn-zoom]:not(:focus):not(:active) {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+  width: 1px;
+}
+[data-rmiz-btn-zoom] {
+  position: absolute;
+  inset: 10px 10px auto auto;
+  cursor: zoom-in;
+}
+[data-rmiz-btn-unzoom] {
+  position: absolute;
+  inset: 20px 20px auto auto;
+  cursor: zoom-out;
+  z-index: 1;
+}
+[data-rmiz-content="found"] img,
+[data-rmiz-content="found"] svg,
+[data-rmiz-content="found"] [role="img"],
+[data-rmiz-content="found"] [data-zoom] {
+  cursor: zoom-in;
+}
+[data-rmiz-modal]::backdrop {
+  display: none;
+}
+[data-rmiz-modal][open] {
+  position: fixed;
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: hidden;
+}
+[data-rmiz-modal-overlay] {
+  position: absolute;
+  inset: 0;
+  transition: background-color 0.3s;
+}
+[data-rmiz-modal-overlay="hidden"] {
+  background-color: rgba(255, 255, 255, 0);
+}
+[data-rmiz-modal-overlay="visible"] {
+  background-color: hsl(var(--background) / 0.8);
+}
+[data-rmiz-modal-content] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+[data-rmiz-modal-img] {
+  position: absolute;
+  cursor: zoom-out;
+  image-rendering: high-quality;
+  transform-origin: top left;
+  transition: transform 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-rmiz-modal-overlay],
+  [data-rmiz-modal-img] {
+    transition-duration: 0.01ms !important;
+  }
 }