Allow styling of the image component

datobs · Apr 25, 2022 · 0a48734 · 0a48734
1 parent 2e30cc9
commit 0a48734
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/Magnifier.js b/src/Magnifier.js
@@ -18,6 +18,7 @@ const Magnifier = forwardRef((props, ref) => {
     dragToMove,
     className,
     style,
+    imageStyle,
     mouseActivation,
     touchActivation,
     interactionSettings,
@@ -53,6 +54,7 @@ const Magnifier = forwardRef((props, ref) => {
         renderOverlay={renderOverlay}
         cursorStyle={cursorStyle}
         cursorStyleActive={finalActiveCursorStyle}
+        imageStyle={imageStyle}
         onImageLoad={onImageLoad}
         onLargeImageLoad={onLargeImageLoad}
         onImageError={onImageError}
@@ -79,6 +81,7 @@ Magnifier.propTypes = {
   dragToMove: PropTypes.bool,
   className: PropTypes.string,
   style: PropTypes.object,
+  imageStyle: PropTypes.object,
   mouseActivation: PropTypes.string,
   touchActivation: PropTypes.string,
   interactionSettings: PropTypes.shape({

diff --git a/src/MagnifierRenderer.js b/src/MagnifierRenderer.js
@@ -15,6 +15,7 @@ const MagnifierRenderer = forwardRef((props, ref) => {
     renderOverlay,
     cursorStyle,
     cursorStyleActive,
+    imageStyle,
     onImageLoad,
     onLargeImageLoad,
     onLoadRefresh
@@ -34,7 +35,8 @@ const MagnifierRenderer = forwardRef((props, ref) => {
         style={{
           display: "block",
           visibility: isActive ? "hidden" : "visible",
-          width: "100%"
+          width: "100%",
+          ...imageStyle,
         }}
         src={imageSrc}
         alt={imageAlt}