Add the option to use a portal

datobs · Mar 11, 2022 · f3b817c · f3b817c
1 parent f00e149
commit f3b817c
Showing 1 changed file with 40 additions and 26 deletions.
diff --git a/src/GlassRenderer.js b/src/GlassRenderer.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { createPortal } from "react-dom";
 import utils from "./utils";
 import Image from "./Image";
 import styles from "./styles";
@@ -9,6 +10,7 @@ const GlassRenderer = props => {
     itemPosition,
     activePosition,
     elementDimensions,
+    elementOffset,
     itemDimensions,
     active,
     imageSrc,
@@ -25,7 +27,8 @@ const GlassRenderer = props => {
     cursorStyle,
     onImageLoad,
     onLargeImageLoad,
-    onLoadRefresh
+    onLoadRefresh,
+    portalTarget
   } = props;
 
   const legalSize = itemDimensions.width > elementDimensions.width;
@@ -48,8 +51,43 @@ const GlassRenderer = props => {
     y: activePosition.y - positionOffset + magnifierOffsetY
   };
 
+  if (portalTarget) {
+    divPosition.x = divPosition.x + elementOffset.left;
+    divPosition.y = divPosition.y + elementOffset.top;
+  }
+
   const borderRadius = square ? "0" : "50%";
 
+  const glass = (
+    <div
+      style={{
+        ...styles.getZoomContainerStyle(
+          magnifierSizeNum,
+          magnifierSizeNum,
+          true
+        ),
+        visibility: !isActive ? "hidden" : "visible",
+        borderRadius,
+        zIndex: "1",
+        border: `${magnifierBorderSize}px solid ${magnifierBorderColor}`,
+        transform: `translate(${divPosition.x}px, ${divPosition.y}px)`,
+        backgroundColor: magnifierBackgroundColor,
+        backgroundClip: "padding-box"
+      }}
+    >
+      <Image
+        style={styles.getLargeImageStyle(position.x, position.y, isActive)}
+        ref={itemRef}
+        src={largeImageSrc || imageSrc}
+        alt={imageAlt}
+        onImageLoad={onLargeImageLoad}
+        onLoadRefresh={onLoadRefresh}
+      />
+    </div>
+  );
+
+  const glassNode = !portalTarget ? glass : createPortal(glass, portalTarget);
+
   return (
     <React.Fragment>
       <Image
@@ -64,31 +102,7 @@ const GlassRenderer = props => {
         onImageLoad={onImageLoad}
         onLoadRefresh={onLoadRefresh}
       />
-      <div
-        style={{
-          ...styles.getZoomContainerStyle(
-            magnifierSizeNum,
-            magnifierSizeNum,
-            true
-          ),
-          visibility: !isActive ? "hidden" : "visible",
-          borderRadius,
-          zIndex: "1",
-          border: `${magnifierBorderSize}px solid ${magnifierBorderColor}`,
-          transform: `translate(${divPosition.x}px, ${divPosition.y}px)`,
-          backgroundColor: magnifierBackgroundColor,
-          backgroundClip: "padding-box"
-        }}
-      >
-        <Image
-          style={styles.getLargeImageStyle(position.x, position.y, isActive)}
-          ref={itemRef}
-          src={largeImageSrc || imageSrc}
-          alt={imageAlt}
-          onImageLoad={onLargeImageLoad}
-          onLoadRefresh={onLoadRefresh}
-        />
-      </div>
+      {glassNode}
       {renderOverlay ? renderOverlay(active) : null}
     </React.Fragment>
   );