feat: add className option to zoom image move ✨ (#327)

willnguyen1312 · Oct 5, 2024 · 416a0be · 416a0be
1 parent 8e440e7
commit 416a0be
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/.changeset/eleven-dots-try.md b/.changeset/eleven-dots-try.md
@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": minor
+---
+
+feat: add className option to zoom image move ✨
diff --git a/packages/core/src/createZoomImageMove.ts b/packages/core/src/createZoomImageMove.ts
@@ -11,6 +11,7 @@ export type ZoomImageMoveOptions = {
   disabledContextMenu?: boolean
   zoomImageProps?: {
     alt?: string
+    className?: string
   }
 }
 
@@ -34,7 +35,8 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
   })
 
   const zoomedImg = document.createElement("img")
-  zoomedImg.alt = options.zoomImageProps?.alt || ""
+  options.zoomImageProps?.alt && (zoomedImg.alt = options.zoomImageProps.alt)
+  options.zoomImageProps?.className && (zoomedImg.className = options.zoomImageProps.className)
   zoomedImg.style.maxWidth = "none"
   zoomedImg.style.position = "absolute"
   zoomedImg.style.top = "0"

diff --git a/packages/docs/src/api/createZoomImageMove.md b/packages/docs/src/api/createZoomImageMove.md
@@ -28,6 +28,7 @@ type ZoomImageMoveOptions = {
   // Props for the zoomed image
   zoomImageProps?: {
     alt?: string
+    className?: string
   }
 
   // Zoom scale, default is 4

diff --git a/size.json b/size.json
@@ -2,7 +2,7 @@
   "@zoom-image/core": {
     "createZoomImageWheel": "2.17 KB",
     "createZoomImageHover": "1.28 KB",
-    "createZoomImageMove": "1 KB",
+    "createZoomImageMove": "1.02 KB",
     "createZoomImageClick": "943 B",
     "cropImage": "386 B",
     "makeCalculateZoom": "171 B",
@@ -11,43 +11,43 @@
   "@zoom-image/react": {
     "useZoomImageWheel": "2.46 KB",
     "useZoomImageHover": "1.56 KB",
-    "useZoomImageMove": "1.26 KB",
+    "useZoomImageMove": "1.28 KB",
     "useZoomImageClick": "1.18 KB"
   },
   "@zoom-image/preact": {
     "useZoomImageWheel": "3.33 KB",
     "useZoomImageHover": "2.46 KB",
-    "useZoomImageMove": "2.19 KB",
+    "useZoomImageMove": "2.21 KB",
     "useZoomImageClick": "2.11 KB"
   },
   "@zoom-image/qwik": {
     "useZoomImageWheel": "2.58 KB",
     "useZoomImageHover": "1.67 KB",
-    "useZoomImageMove": "1.37 KB",
+    "useZoomImageMove": "1.38 KB",
     "useZoomImageClick": "1.29 KB"
   },
   "@zoom-image/solid": {
     "useZoomImageWheel": "3.62 KB",
     "useZoomImageHover": "2.75 KB",
-    "useZoomImageMove": "2.48 KB",
+    "useZoomImageMove": "2.49 KB",
     "useZoomImageClick": "2.4 KB"
   },
   "@zoom-image/svelte": {
     "useZoomImageWheel": "2.64 KB",
     "useZoomImageHover": "1.75 KB",
-    "useZoomImageMove": "1.48 KB",
+    "useZoomImageMove": "1.49 KB",
     "useZoomImageClick": "1.39 KB"
   },
   "@zoom-image/vue": {
     "useZoomImageWheel": "2.42 KB",
     "useZoomImageHover": "1.54 KB",
-    "useZoomImageMove": "1.25 KB",
+    "useZoomImageMove": "1.27 KB",
     "useZoomImageClick": "1.17 KB"
   },
   "@zoom-image/angular": {
-    "ZoomImageClickService": "4.04 KB",
-    "ZoomImageHoverService": "4.04 KB",
-    "ZoomImageMoveService": "4.04 KB",
-    "ZoomImageWheelService": "4.04 KB"
+    "ZoomImageHoverService": "4.07 KB",
+    "ZoomImageClickService": "4.06 KB",
+    "ZoomImageMoveService": "4.06 KB",
+    "ZoomImageWheelService": "4.06 KB"
   }
 }