feat: added support for imgProps and videoProps

Author: jerzy-mankowski

packages/react/src/CloudinaryImage.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CloudinaryImage } from './CloudinaryImage';
 import { Cloudinary } from '@cloudinary/url-gen';
@@ -6,7 +7,8 @@ import { scale } from '@cloudinary/url-gen/actions/resize';
 import { format, quality } from '@cloudinary/url-gen/actions/delivery';
 
 const meta: Meta<typeof CloudinaryImage> = {
-  component: CloudinaryImage
+  component: CloudinaryImage,
+  tags: ['autodocs']
 };
 
 export default meta;
@@ -28,21 +30,22 @@ export const VersionV3: Story = {
   }
 };
 
-const cloudinary = new Cloudinary({
-  cloud: {
-    cloudName: 'demo'
-  }
-});
-const cloudinaryImageObject = cloudinary
-  .image('front_face')
-  .effect(backgroundRemoval())
-  .effect(sepia())
-  .resize(scale().height(333))
-  .delivery(format('auto'))
-  .delivery(quality('auto'));
-
 export const VersionV2: Story = {
-  args: {
-    cldImg: cloudinaryImageObject
+  render: () => {
+    const cloudinary = new Cloudinary({
+      cloud: {
+        cloudName: 'demo'
+      }
+    });
+
+    const cloudinaryImageObject = cloudinary
+      .image('front_face')
+      .effect(backgroundRemoval())
+      .effect(sepia())
+      .resize(scale().height(333))
+      .delivery(format('auto'))
+      .delivery(quality('auto'));
+
+    return <CloudinaryImage cldImg={cloudinaryImageObject} alt='' />
   }
 }

packages/react/src/CloudinaryImage.tsx

@@ -49,21 +49,24 @@ type ImageV3Props = {
   src: string;
   alt: string;
   children?: never;
+  imgProps?: React.HTMLProps<HTMLImageElement>
 } & ImageTransformationProps;
 
 interface ImageV2Props {
   src?: never;
+  alt: string;
   cldImg: UrlGenCloudinaryImage;
   children?: never;
+  imgProps?: React.HTMLProps<HTMLImageElement>
 }
 
 export type CloudinaryImageProps = ImageV3Props | ImageV2Props;
 
 export const CloudinaryImage = forwardRef<HTMLImageElement, CloudinaryImageProps>(
   (props, ref) => {
     if (props.cldImg) {
-      const { cldImg, ...rest } = props;
-      return <img src={cldImg.toURL()} {...rest} ref={ref} />;
+      const { cldImg, alt, imgProps, ...rest } = props;
+      return <img {...imgProps} src={cldImg.toURL()} alt={alt} {...rest} ref={ref} />;
     }
     const transformationMap = {
       format: parseFormat,
@@ -84,12 +87,12 @@ export const CloudinaryImage = forwardRef<HTMLImageElement, CloudinaryImageProps
       roundCorners: parseRoundCorners,
       opacity: parseOpacity
     } satisfies TransformationMap<ImageTransformationProps>;
-    const { src, alt, children, cldImg, ...rest } = props;
+    const { src, alt, children, cldImg, imgProps, ...rest } = props;
     const { baseCloudUrl, assetPath } = parseCloudinaryUrlToParts(src);
     const transformationString = parsePropsToTransformationString({
       transformationProps: rest,
       transformationMap
     });
 
-    return <img src={`${baseCloudUrl}/${transformationString}/${assetPath}`} alt={alt} ref={ref} />;
+    return <img {...imgProps} src={`${baseCloudUrl}/${transformationString}/${assetPath}`} alt={alt} ref={ref} />;
   });

packages/react/src/CloudinaryVideo.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CloudinaryVideo } from './CloudinaryVideo';
 import { Cloudinary } from '@cloudinary/url-gen';
@@ -11,13 +12,14 @@ import { vcl31 } from '@cloudinary/url-gen/qualifiers/videoCodecLevel';
 import { scale } from '@cloudinary/url-gen/actions/resize';
 
 const meta: Meta<typeof CloudinaryVideo> = {
-  component: CloudinaryVideo
+  component: CloudinaryVideo,
+  tags: ['autodocs']
 };
 
 export default meta;
 type Story = StoryObj<typeof CloudinaryVideo>;
 
-export const VersionV3: Story = {
+export const Version_v3: Story = {
   args: {
     src: 'https://res.cloudinary.com/demo/video/upload/dog.mp4',
     resize: { height: 333 },
@@ -38,24 +40,31 @@ const cloudinary = new Cloudinary({
     cloudName: 'demo'
   }
 });
-const cloudinaryVideoObject = cloudinary.video('dog.mp4')
-  .effect(blackwhite())
-  .resize(scale().height(333))
-  .videoEdit(trim().duration('1p'))
-  .roundCorners(byRadius(20))
-  .transcode(
-    videoCodec(
-      h264()
-        .profile(baseline())
-        .level(vcl31())
-    )
-  );
 
-export const VersionV2: Story = {
-  args: {
-    cldVid: cloudinaryVideoObject,
-    loop: true,
-    autoPlay: true,
-    muted: true
+export const Version_v2: Story = {
+  render: () => {
+    const cloudinaryVideoObject = cloudinary.video('dog.mp4')
+      .effect(blackwhite())
+      .resize(scale().height(333))
+      .videoEdit(trim().duration('1p'))
+      .roundCorners(byRadius(20))
+      .transcode(
+        videoCodec(
+          h264()
+            .profile(baseline())
+            .level(vcl31())
+        )
+      );
+
+    return (
+      <CloudinaryVideo
+        cldVid={cloudinaryVideoObject}
+        videoProps={{
+          loop: true,
+          autoPlay: true,
+          muted: true
+        }}
+      />
+    )
   }
 }

packages/react/src/CloudinaryVideo.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { forwardRef } from 'react';
 import { type CloudinaryVideo as UrlGenCloudinaryVideo } from '@cloudinary/url-gen/assets/CloudinaryVideo';
 import { parseCloudinaryUrlToParts } from './parseCloudinaryUrlToParts';
 import { parseFormat } from './transformationParsers/parseFormat';
@@ -58,9 +58,10 @@ type VideoV3Props = {
   children?: never;
 } & VideoTransformationProps;
 
-interface VideoV2Props extends React.HTMLProps<HTMLVideoElement> {
+interface VideoV2Props {
   src?: never;
   cldVid: UrlGenCloudinaryVideo;
+  videoProps?: React.HTMLProps<HTMLVideoElement>
   children?: never;
 }
 

tsconfig.json

@@ -15,6 +15,6 @@
     "@cloudinary/vue": ["vue/src"],
     "@cloudinary/*": ["*/src"],
     "*": ["node_modules"]
-},
+  },
   "exclude": ["node_modules", "**/node_modules", "**/e2e", "**/dist", "**/build", "**/coverage"]
 }