Merge pull request #294 from totakoko/allow_card_images_lazy_loading

Ajoute nativeImgProps pour les Card
codegouvfr · Sep 4, 2024 · b06fcd6 · b06fcd6
2 parents 9a2c192 + 2dd9f1c
commit b06fcd6
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/src/Card.tsx b/src/Card.tsx
@@ -1,4 +1,11 @@
-import React, { memo, forwardRef, type ReactNode, type CSSProperties } from "react";
+import React, {
+    memo,
+    forwardRef,
+    type ReactNode,
+    type CSSProperties,
+    DetailedHTMLProps,
+    ImgHTMLAttributes
+} from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
@@ -88,20 +95,23 @@ export namespace CardProps {
         imageUrl: string;
         imageAlt: string;
         imageComponent?: never;
+        nativeImgProps?: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
     };
 
     export type WithImageComponent = {
         badge?: ReactNode;
         imageUrl?: never;
         imageAlt?: never;
         imageComponent: ReactNode;
+        nativeImgProps?: never;
     };
 
     export type WithoutImage = {
         badge?: never;
         imageUrl?: never;
         imageAlt?: never;
         imageComponent?: never;
+        nativeImgProps?: never;
     };
 }
 
@@ -118,6 +128,7 @@ export const Card = memo(
             imageUrl,
             imageAlt,
             imageComponent,
+            nativeImgProps,
             start,
             detail,
             end,
@@ -224,9 +235,14 @@ export const Card = memo(
                     <div className={cx(fr.cx("fr-card__header"), classes.header)}>
                         <div className={cx(fr.cx("fr-card__img"), classes.img)}>
                             <img
-                                className={cx(fr.cx("fr-responsive-img"), classes.imgTag)}
                                 src={imageUrl}
                                 alt={imageAlt}
+                                {...nativeImgProps}
+                                className={cx(
+                                    fr.cx("fr-responsive-img"),
+                                    classes.imgTag,
+                                    nativeImgProps?.className
+                                )}
                             />
                         </div>
                         {badge !== undefined && (