React sample projects

import { Cloudinary } from '@cloudinary/url-gen';
import { thumbnail } from '@cloudinary/url-gen/actions/resize';
import { autoGravity } from '@cloudinary/url-gen/qualifiers/gravity';
import { format, quality } from '@cloudinary/url-gen/actions/delivery';
import { AdvancedImage, placeholder } from '@cloudinary/react';

const cld = new Cloudinary({
  cloud: {
    cloudName: import.meta.env.VITE_CLOUD_NAME,
  },
});

const CldImage = ({ publicId }) => {
  const myImage = cld
    .image(publicId)
    .resize(thumbnail().width(300).height(300).gravity(autoGravity()))
    .delivery(format('auto'))
    .delivery(quality('auto'));
  return (
    <AdvancedImage
      cldImg={myImage}
      style={{ maxWidth: '100%' }}
      plugins={[placeholder()]}
      className="rounded-lg shadow-lg"
    />
  );
};
export default CldImage;

import {Cloudinary} from "@cloudinary/url-gen";
import {fill} from "@cloudinary/url-gen/actions/resize";
import {autoGravity} from "@cloudinary/url-gen/qualifiers/gravity";

export function getAutoGravityImage() {

    // Create and configure your Cloudinary instance.
    const cld = new Cloudinary({
    cloud: {
        cloudName: 'demo'
    }
    }); 

    // Use the image with public ID, 'basketball_in_net'.
    const myImage = cld.image('basketball_in_net');

    // Apply the transformation.
    myImage.resize(fill().width(200).height(300).gravity(autoGravity()));

    return myImage;
}

import cld from "./cld";
import { backgroundRemoval, dropShadow } from "@cloudinary/url-gen/actions/effect";
import { scale } from "@cloudinary/url-gen/actions/resize";

export function getBackgroundRemovedShadowUrl(publicID, width, height, az, el, spr) {

  const myImage = cld.image(publicID); 

  // Apply the background removal and drop shadow effects,
  // then scale the image to the specified dimensions
  // and optimize format and quality
  myImage
  .effect(backgroundRemoval())
  .effect(dropShadow().azimuth(az).elevation(el).spread(spr))
  .resize(scale().width(width).height(height))
  .format('auto')
  .quality('auto');

  // Return the URL of the image
  return myImage.toURL();
}

class App extends React.Component {
    render() {
        return (
            <div>
                <h2>Render a Cloudinary image</h2>
                <AdvancedImage cldImg={cloudinaryImage} />
                <div style={{ height: "20px" }}></div>
                <h2>Cloudinary image with default accessibility</h2>
                <AdvancedImage cldImg={cloudinaryImage} plugins={[accessibility()]} />
                <div style={{ height: "20px" }}></div>
                <h2>Cloudinary image with colorblind accessibility</h2>
                <AdvancedImage
                    cldImg={cloudinaryImage}
                    plugins={[accessibility({ mode: "colorblind" })]}
                />
                <h2>Cloudinary image with responsive</h2>
                <div>Resize window to see changes (100 is the step size in px)</div>
                <AdvancedImage cldImg={cloudinaryImage} plugins={[responsive({ steps: 100 })]} />
                <h2>Scroll down to see images lazy load</h2>
                <div style={{ height: "700px" }}>
                    You can open your network tab to see the images loading
                </div>
                <AdvancedImage cldImg={brownSheep} plugins={[lazyload()]} />
                <div style={{ height: "400px" }} />
                <AdvancedImage cldImg={woman} plugins={[lazyload()]} />
                <div style={{ height: "400px" }} />
                <AdvancedImage cldImg={cat} plugins={[lazyload()]} />
                <div style={{ height: "50px" }} />
                <div style={{ height: "700px" }}>
                    Scroll down for lazyloading a large image with a placeholder
                </div>
                <AdvancedImage
                    cldImg={largeImage}
                    plugins={[lazyload(), placeholder()]}
                />
            </div>
        );
    }
}

  const handleUploadSuccess = (publicId: string, poorQuality: boolean) => {
    setLoading(false)
    setUploadError('')
    setProfilePublicId(publicId)
    setProfileIsPoorQuality(poorQuality)

    // Create the delivery URL for the profile picture:
    const profileImage = cld.image(publicId)

    profileImage.resize(fill().width(300).height(300).gravity(
      focusOn(face()).fallbackGravity(autoGravity())))
      .format('auto').quality('auto')

    if (poorQuality) {
      profileImage.effect(enhance()).effect(generativeRestore()).effect(upscale())
    }

    setProfileImage(profileImage)
  }

import { useEffect, useRef } from 'react';

const CloudinaryUploadWidget = ({ uwConfig, setPublicId }) => {
  const uploadWidgetRef = useRef(null);
  const uploadButtonRef = useRef(null);

  useEffect(() => {
    const initializeUploadWidget = () => {
      if (window.cloudinary && uploadButtonRef.current) {
        // Create upload widget
        uploadWidgetRef.current = window.cloudinary.createUploadWidget(
          uwConfig,
          (error, result) => {
            if (!error && result && result.event === 'success') {
              console.log('Upload successful:', result.info);
              setPublicId(result.info.public_id);
            }
          }
        );

        // Add click event to open widget
        const handleUploadClick = () => {
          if (uploadWidgetRef.current) {
            uploadWidgetRef.current.open();
          }
        };

        const buttonElement = uploadButtonRef.current;
        buttonElement.addEventListener('click', handleUploadClick);

        // Cleanup
        return () => {
          buttonElement.removeEventListener('click', handleUploadClick);
        };
      }
    };

    initializeUploadWidget();
  }, [uwConfig, setPublicId]);

  return (
    <button
      ref={uploadButtonRef}
      id="upload_widget"
      className="cloudinary-button"
    >
      Upload
    </button>
  );
};

export default CloudinaryUploadWidget;

<CloudinaryUploadWidget uwConfig={uwConfig} setPublicId={setPublicId} />

import { useEffect, useRef } from 'react';

const ProductGallery = ({ galleryConfig }) => {
  const galleryRef = useRef(null);
  const cloudName = import.meta.env.VITE_CLOUDINARY_CLOUD_NAME || 'demo';

  useEffect(() => {
    if (window && galleryRef.current) {
      window.cloudinary
        .galleryWidget({
          container: galleryRef.current,
          cloudName: cloudName,
          ...galleryConfig,
        })
        .render();
    }
  }, [galleryConfig]);

  return (
    <div ref={galleryRef} style={{ width: '80%', margin: 'auto' }}>
      <div>Loading...</div>
    </div>
  );
};

export default ProductGallery;

<ProductGallery
  galleryConfig={{
    mediaAssets: [
      { tag: 'electric_car_product_gallery_demo' },
      { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
      { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
    ],
  }}
/>

import { useEffect, useRef } from 'react';
import cloudinary from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const VideoPlayer = ({ id, publicId, ...props }) => {
  const cloudinaryRef = useRef();
  const playerRef = useRef();

  useEffect(() => {
    if (cloudinaryRef.current) return;

    cloudinaryRef.current = cloudinary;

    const player = cloudinaryRef.current.videoPlayer(playerRef.current, {
      cloud_name: 'demo',
      secure: true,
      controls: true,
    });
    player.source(publicId);
  }, []);

  return (
    <video
      ref={playerRef}
      id={id}
      className="cld-video-player cld-fluid"
      {...props}
    />
  );
};

export default VideoPlayer;

<VideoPlayer
  id="player"
  publicId="glide-over-coastal-beach"
  data-cld-source='{"info": {"title": "Glide Over Coastal Beach"}}'
  data-cld-transformation='{"effect": "blur"}'
  data-cld-poster-options='{"transformation": {"effect": "blur"}}'
/>