useGif

The useGif hook gives you the option to call either a video as a looping gif, or a gif stored in your account. The result is a URL generated by the SDK.

import { useGif } from 'use-cloudinary'
function Gif({ publicId, transformations, width, height, alt  }) {
  const { generateUrl, url, isLoading, isError, error } = useImage({ cloudName: 'testing-hooks-upload' });
  React.useEffect(() => {
    // the `generateUrl` function will hook internally to the SDK and do a lot of the heavy lifting for generating your image url as a gif 
    generateUrl({
      publicId,
      transformations: {
        // by supplying height and width separately from the transformations object, 
        // we can use the height and width to dictate the size of the element AND the transformations
        height,
        width,
        // then we can spread the rest of the transformations in
        ...transformations
        /* 
          you'll also be getting these automatically attached from internals
          fetchFormat: 'auto',
          quality: 'auto',
          crop: 'scale'
        */        
      }
    });
  });
  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>{error.message}</p>;
   return (
     <img 
      src={data} 
      alt={alt}
      style={{ 
        height: `${height}px`, 
        width: `${width}px` 
      }}
    />
  )
}

Args

Key	Type	Required?	Description
cloudName	String	Yes	Your Cloudinary cloud name, used to identify where we're getting our media from

Return values

Key	Type	Description
generateUrl	Func	An async function that accepts options and returns the URL of your Cloudinary asset
url	undefined \|\| String	When `generateUrl` is successful, `url` will return a URL string. More about React Query's return values here
isLoading	Boolean	isLoading state returns a boolean if the query is in a "hard" loading state. This means no cached data and the query is currently fetching.here
isErrro	Boolean	isError returns a boolean (true) if the query attempt resulted in an error (otherwise false). More about React Query return vairables here
isSuccess	Boolean	isSuccess returns a boolean (true) if the query attempt resulted in an error (otherwise false).More about React Query return vairables here
isIdle	Boolean	isIdle returns a boolean (true) if the query is initialized with enabled: false and no initial data is available (otherwise false). More about React Query return vairables here
error	Object	When a server error is returned, the error is surfaced to the error object. More about React Query's return values here

generateUrl()

The generateUrl function is just a setState, used to fire off our internal query and pass our options into our SDK to generate our URL.

Key	Type	Required	Description
publicId	String	Yes	The public id is the name used as a title for the media you want to call
transformations	Object	No	Check out all the transformations you can apply to your Gif here. You can also learn more about animated images here

Edit this page on GitHub

use-cloudinary-docs

Table of Contents

Args

Return values

generateUrl()

useAudio

useVideo