Merge pull request #25 from Mario-Duarte/24-uncaught-error-objects-are-not-valid-as-a-react-child-found-object-with-keys-typeof-type-key-ref-props

24 - uncaught error objects are not valid as a react child found object with keys typeof type key ref props

Author: Mario-Duarte

lib/react-image-zooom.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "react";
+import React, { JSX } from "react";
 interface ImageZoomProps {
     zoom?: string | number;
     fullWidth?: boolean;
@@ -9,7 +9,7 @@ interface ImageZoomProps {
     id?: string;
     className?: string;
     onError?: (error: ErrorEvent) => void;
-    errorContent?: JSX.Element;
+    errorContent?: React.ReactNode;
 }
 declare function ImageZoom({ zoom, fullWidth, alt, width, height, src, id, className, onError, errorContent, }: ImageZoomProps): JSX.Element;
 export default ImageZoom;

lib/react-image-zooom.js

@@ -4,7 +4,7 @@
   "author": {
     "name": "Mario Duarte"
   },
-  "version": "1.5.5",
+  "version": "1.5.6",
   "main": "./lib/react-image-zooom.js",
   "types": "./lib/react-image-zooom.d.ts",
   "module": "./lib/react-image-zooom.js",

lib/react-image-zooom.js.map

@@ -96,7 +96,7 @@ interface ImageZoomProps {
   id?: string;
   className?: string;
   onError?: (error: ErrorEvent) => void;
-  errorContent?: JSX.Element;
+  errorContent?: React.ReactNode;
 }
 
 function ImageZoom({
@@ -225,16 +225,12 @@ function ImageZoom({
     [isZoomed, imgData, calculateZoom, position]
   );
 
-  if (error)
-    return (
-      <>
-        {isValidElement(errorContent) ? (
-          errorContent
-        ) : (
-          <ErrorText>There was a problem loading your image</ErrorText>
-        )}
-      </>
-    );
+  if (error) {
+    if (isValidElement(errorContent)) {
+      return errorContent;
+    }
+    return <ErrorText>There was a problem loading your image</ErrorText>;
+  }
 
   const figureClasses = [
     imgData ? "loaded" : "loading",