@nextui-org/use-image - npm Package Compare versions

Comparing version 0.0.0-canary-20241206144245 to 0.0.0-canary-20250102191541

dist/index.d.ts

@@ -59,3 +59,5 @@ import { ImgHTMLAttributes } from 'react';
 declare function useImage(props?: UseImageProps): Status;
+declare const shouldShowFallbackImage: (status: Status, fallbackStrategy: FallbackStrategy) => boolean;
+type UseImageReturn = ReturnType<typeof useImage>;
 
-export { FallbackStrategy, UseImageProps, useImage };
+export { FallbackStrategy, UseImageProps, UseImageReturn, shouldShowFallbackImage, useImage };

dist/index.js

@@ -23,2 +23,3 @@ "use strict";
 __export(src_exports, {
+  shouldShowFallbackImage: () => shouldShowFallbackImage,
   useImage: () => useImage
@@ -28,25 +29,14 @@ });
 var import_react = require("react");
-var import_use_safe_layout_effect = require("@nextui-org/use-safe-layout-effect");
+var import_react_utils = require("@nextui-org/react-utils");
 function useImage(props = {}) {
-  const { loading, src, srcSet, onLoad, onError, crossOrigin, sizes, ignoreFallback } = props;
-  const [status, setStatus] = (0, import_react.useState)("pending");
+  const { onLoad, onError, ignoreFallback } = props;
+  const isHydrated = (0, import_react_utils.useIsHydrated)();
+  const imageRef = (0, import_react.useRef)(isHydrated ? new Image() : null);
+  const [status, setStatus] = (0, import_react.useState)(
+    () => isHydrated ? setImageAndGetInitialStatus(props, imageRef) : "pending"
+  );
   (0, import_react.useEffect)(() => {
-    setStatus(src ? "loading" : "pending");
-  }, [src]);
-  const imageRef = (0, import_react.useRef)();
-  const load = (0, import_react.useCallback)(() => {
-    if (!src)
+    if (!imageRef.current)
       return;
-    flush();
-    const img = new Image();
-    img.src = src;
-    if (crossOrigin)
-      img.crossOrigin = crossOrigin;
-    if (srcSet)
-      img.srcset = srcSet;
-    if (sizes)
-      img.sizes = sizes;
-    if (loading)
-      img.loading = loading;
-    img.onload = (event) => {
+    imageRef.current.onload = (event) => {
       flush();
@@ -56,3 +46,3 @@ setStatus("loaded");
     };
-    img.onerror = (error) => {
+    imageRef.current.onerror = (error) => {
       flush();
@@ -62,4 +52,3 @@ setStatus("failed");
     };
-    imageRef.current = img;
-  }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading]);
+  }, [imageRef.current]);
   const flush = () => {
@@ -72,17 +61,31 @@ if (imageRef.current) {
   };
-  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (ignoreFallback)
-      return void 0;
-    if (status === "loading") {
-      load();
-    }
-    return () => {
-      flush();
-    };
-  }, [status, load, ignoreFallback]);
   return ignoreFallback ? "loaded" : status;
 }
+function setImageAndGetInitialStatus(props, imageRef) {
+  const { loading, src, srcSet, crossOrigin, sizes, ignoreFallback } = props;
+  if (!src)
+    return "pending";
+  if (ignoreFallback)
+    return "loaded";
+  const img = new Image();
+  img.src = src;
+  if (crossOrigin)
+    img.crossOrigin = crossOrigin;
+  if (srcSet)
+    img.srcset = srcSet;
+  if (sizes)
+    img.sizes = sizes;
+  if (loading)
+    img.loading = loading;
+  imageRef.current = img;
+  if (img.complete && img.naturalWidth) {
+    return "loaded";
+  }
+  return "loading";
+}
+var shouldShowFallbackImage = (status, fallbackStrategy) => status !== "loaded" && fallbackStrategy === "beforeLoadOrError" || status === "failed" && fallbackStrategy === "onError";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  shouldShowFallbackImage,
   useImage
 });

package.json

 {
   "name": "@nextui-org/use-image",
-  "version": "0.0.0-canary-20241206144245",
+  "version": "0.0.0-canary-20250102191541",
   "description": "React hook for progressing image loading",
@@ -28,3 +28,4 @@ "keywords": [
   "dependencies": {
-    "@nextui-org/use-safe-layout-effect": "0.0.0-canary-20241206144245"
+    "@nextui-org/use-safe-layout-effect": "2.1.1",
+    "@nextui-org/react-utils": "0.0.0-canary-20250102191541"
   },
@@ -31,0 +32,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

9613

8.62%

Lines of code

204

3.55%

Worsened metrics

Dependency count

3

50%

Dependency changes

• + Added

  @nextui-org/react-utils@0.0.0-canary-20250102191541

• + Added

  @nextui-org/react-rsc-utils@2.1.1
  (transitive)

• + Added

  @nextui-org/react-utils@0.0.0-canary-20250102191541
  (transitive)

• + Added

  @nextui-org/shared-utils@2.1.2
  (transitive)

• + Added

  @nextui-org/use-safe-layout-effect@2.1.1
  (transitive)

• - Removed

  @nextui-org/use-safe-layout-effect@0.0.0-canary-20241206144245
  (transitive)

• Updated

  @nextui-org/use-safe-layout-effect@2.1.1