Forward refs

datobs · Mar 11, 2022 · d4b6c65 · d4b6c65
1 parent 0d85a80
commit d4b6c65
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/GlassMagnifier.js b/src/GlassMagnifier.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
 import utils from "./utils";
 import ReactInputPosition, {
@@ -7,7 +7,7 @@ import ReactInputPosition, {
 } from "react-input-position";
 import GlassRenderer from "./GlassRenderer";
 
-const GlassMagnifier = props => {
+const GlassMagnifier = forwardRef((props, ref) => {
   const {
     imageSrc,
     largeImageSrc,
@@ -63,10 +63,11 @@ const GlassMagnifier = props => {
         onImageLoad={onImageLoad}
         onLargeImageLoad={onLargeImageLoad}
         portalTarget={portalTarget}
+        ref={ref}
       />
     </ReactInputPosition>
   );
-};
+});
 
 GlassMagnifier.propTypes = {
   imageSrc: PropTypes.oneOfType([

diff --git a/src/GlassRenderer.js b/src/GlassRenderer.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { createPortal } from "react-dom";
 import utils from "./utils";
 import Image from "./Image";
 import styles from "./styles";
 
-const GlassRenderer = props => {
+const GlassRenderer = forwardRef((props, ref) => {
   const {
     itemRef,
     itemPosition,
@@ -101,11 +101,12 @@ const GlassRenderer = props => {
         alt={imageAlt}
         onImageLoad={onImageLoad}
         onLoadRefresh={onLoadRefresh}
+        ref={ref}
       />
       {glassNode}
       {renderOverlay ? renderOverlay(active) : null}
     </React.Fragment>
   );
-};
+});
 
 export default GlassRenderer;