Add support to style zoom image wrapper on hover 💞 (#214)

.changeset/beige-tools-travel.md

@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": minor
+---
+
+Add support to style zoom image wrapper on hover 💞

packages/core/src/createZoomImageHover.ts

@@ -9,6 +9,7 @@ export type ZoomImageHoverOptions = {
   zoomLensClass?: string
   zoomLensScale?: number
   zoomTarget: HTMLElement
+  zoomTargetClass?: string
   scale?: number
 }
 
@@ -32,13 +33,14 @@ export function createZoomImageHover(container: HTMLElement, options: ZoomImageH
   const finalOptions: Required<ZoomImageHoverOptions> = {
     zoomImageSource: options.zoomImageSource || sourceImgElement.src,
     zoomLensClass: options.zoomLensClass || "",
+    zoomTargetClass: options.zoomTargetClass || "",
     customZoom: options.customZoom,
     scale: options.scale || 2,
     zoomTarget: options.zoomTarget,
     zoomLensScale: options.zoomLensScale || 1,
   }
 
-  const { scale, zoomImageSource, customZoom, zoomLensClass, zoomTarget, zoomLensScale } = finalOptions
+  const { scale, zoomImageSource, customZoom, zoomLensClass, zoomTarget, zoomLensScale, zoomTargetClass } = finalOptions
 
   const store = createStore<ZoomImageHoverState>({
     zoomedImgStatus: imageCache.checkImageLoaded(zoomImageSource) ? "loaded" : "idle",
@@ -152,12 +154,22 @@ export function createZoomImageHover(container: HTMLElement, options: ZoomImageH
     disableScroll()
     zoomedImg.style.display = "block"
     zoomLens.style.display = "block"
+
+    if (zoomTargetClass) {
+      const classes = zoomTargetClass.split(" ")
+      classes.forEach((className) => zoomTarget.classList.add(className))
+    }
   }
 
   function handlePointerLeave() {
     enableScroll()
     zoomedImg.style.display = "none"
     zoomLens.style.display = "none"
+
+    if (zoomTargetClass) {
+      const classes = zoomTargetClass.split(" ")
+      classes.forEach((className) => zoomTarget.classList.remove(className))
+    }
   }
 
   function handleScroll() {

packages/docs/src/api/createZoomImageHover.md

@@ -35,7 +35,7 @@ type ZoomImageHoverOptions = {
   // The source of zoomed image, default is the same as the original image
   zoomImageSource?: string
 
-  // The css class will be added to zoom lens element
+  // The css classes will be added to zoom lens element
   zoomLensClass?: string
 
   // By default, zoomLensScale have a value of 1
@@ -45,6 +45,9 @@ type ZoomImageHoverOptions = {
   // The container of zoomed image
   zoomTarget: HTMLElement
 
+  // The css classes will be added to zoomed image container on zoom
+  zoomTargetClass?: string
+
   // The scale of zoomed image, default is 2
   scale?: number
 }