updates and amends

Author: Mario-Duarte

lib/react-image-zooom.d.ts

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

lib/react-image-zooom.js

@@ -4,7 +4,7 @@
   "author": {
     "name": "Mario Duarte"
   },
-  "version": "1.5.0",
+  "version": "1.5.4",
   "main": "./lib/react-image-zooom.js",
   "types": "./lib/react-image-zooom.d.ts",
   "module": "./lib/react-image-zooom.js",
@@ -50,5 +50,12 @@
     "typescript": "^4.9.5",
     "webpack": "^5.97.1",
     "webpack-cli": "^6.0.1"
-  } 
+  },
+  "exports": {
+    ".": {
+      "import": "./lib/react-image-zooom.js",
+      "require": "./lib/react-image-zooom.js",
+      "types": "./lib/react-image-zooom.d.ts"
+    }
+  }
 }

lib/react-image-zooom.js.map

@@ -5,6 +5,8 @@ import React, {
   MouseEvent,
   TouchEvent,
   useRef,
+  JSX,
+  isValidElement,
 } from "react";
 import styled, { keyframes } from "styled-components";
 import usePreventBodyScroll from "./hooks/usePreventBodyScroll";
@@ -94,7 +96,7 @@ interface ImageZoomProps {
   id?: string;
   className?: string;
   onError?: (error: ErrorEvent) => void;
-  errorContent?: React.ReactNode;
+  errorContent?: JSX.Element;
 }
 
 function ImageZoom({
@@ -107,8 +109,8 @@ function ImageZoom({
   id,
   className,
   onError,
-  errorContent = <ErrorText>There was a problem loading your image</ErrorText>,
-}: ImageZoomProps) {
+  errorContent,
+}: ImageZoomProps): JSX.Element {
   const [isZoomed, setIsZoomed] = useState<boolean>(false);
   const [position, setPosition] = useState<string>("50% 50%");
   const figureRef = useRef<HTMLElement | null>(null);
@@ -219,13 +221,24 @@ function ImageZoom({
     [isZoomed, imgData, calculateZoom, position]
   );
 
-  if (error) return <>{errorContent}</>;
+  if (error)
+    return (
+      <>
+        {isValidElement(errorContent) ? (
+          errorContent
+        ) : (
+          <ErrorText>There was a problem loading your image</ErrorText>
+        )}
+      </>
+    );
 
   const figureClasses = [
-    imgData ? 'loaded' : 'loading',
-    isZoomed ? 'zoomed' : 'fullView',
-    className
-  ].filter(Boolean).join(' ');
+    imgData ? "loaded" : "loading",
+    isZoomed ? "zoomed" : "fullView",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <Figure

package.json

@@ -6,7 +6,9 @@ module.exports = {
   output: {
     path: path.resolve("lib"),
     filename: "react-image-zooom.js",
-    libraryTarget: "commonjs2",
+    library: "ReactImageZooom", 
+    libraryTarget: "umd", 
+    globalObject: "this",
   },
   optimization: {
     minimize: false,
@@ -24,7 +26,6 @@ module.exports = {
             options: {
               presets: ["@babel/preset-react", "@babel/preset-env"],
               plugins: [
-                ["babel-plugin-react-compiler", { target: "19" }],
                 "@babel/plugin-transform-react-jsx",
               ],
             },