React SDK

Install

Install Cloudinary's JavaScript and React packages using the NPM package manager:

If you prefer not to use a bundler, you can import the packages directly from a CDN.

Configure

Include Cloudinary's React and JavaScript classes in your code:

Set required configuration parameters

You can set the required configuration parameter, cloudName, either when creating a Cloudinary instance or per asset.

Cloudinary instance configuration

If you want to use the same configuration to deliver all your media assets, it's best to set up the configuration through a Cloudinary instance, for example:

Asset instance configuration

If you need to specify different configurations to deliver your media assets, you can specify the configuration per image/video instance, for example:

Set additional configuration parameters

In addition to the required configuration parameters, you can define a number of optional configuration parameters if relevant.

You can use the Cloudinary constructor to set configuration parameters, for example:

Configuration video tutorials

The following tutorials can help you install and set up your SDK:

See more React video tutorials.

Use

Once you've installed and configured the React SDK, you can use it for:

• Transforming images - Render your images with transformations applied, using the AdvancedImage component. See examples
• Transforming videos - Render your videos with transformations applied, using the AdvancedVideo component. See examples
• Optimizing delivery - Use plugins to improve your user's experience by automating media tasks like lazy loading, responsive images and more. See plugins

Quick examples: Image transformations

Here are two quick examples to get you started with image transformations:

• Image transformation example 1 - Apply a sepia effect to an image
• Image transformation example 2 - Apply multiple transformations as chained transformations

Image transformation example 1

The following React code renders the front_face.jpg image with a sepia effect applied:

This code creates the HTML required to render the following transformation URL:

Image transformation example 2

You can apply more than one transformation at a time (see chained transformations) to give more interesting results (notice how you import only the actions and qualifiers that you need, to minimize your bundle size):

This relatively simple code performs all of the following on the original front_face.jpg image before delivering it:

• Crop to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
• Round the corners with a 20 pixel radius
• Apply a sepia effect
• Overlay the Cloudinary logo on the southeast corner of the image (with a slight offset). Scale the logo overlay down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%).
• Rotate the resulting image (including the overlay) by 10 degrees
• Optimize the image to reduce the size of the image without impacting visual quality.
• Convert and deliver the image in PNG format (the originally uploaded image was a JPG)

And here's the URL that's automatically generated and rendered from the above code:

The @cloudinary/url-gen package installs an additional transformation-builder-sdk library as a dependency, which handles the transformation generation part of the URL.

You can use the Transformation Builder reference to find all available transformations, syntax and examples.

Quick examples: Video transformations

Here are two quick examples to get you started with video transformations:

• Video transformation example 1 - Adjust the brightness of a video
• Video transformation example 2 - Apply multiple transformations as chained transformations

Video transformation example 1

The following React code renders the ship.mp4 video with a brightness adjustment applied:

This code creates the HTML required to render the following transformation URL:

Video transformation example 2

You can apply more than one transformation at a time (see chained transformations) to give more interesting results (notice how you import only the actions and qualifiers that you need, to minimize your bundle size):

This relatively simple code performs all of the following on the original ship.mp4 video before delivering it:

• Crop to a 1:1 aspect ratio (square) with a width of 300 pixels, using automatic gravity to determine the focal point
• Apply a blur effect with strength 50
• Apply maximum rounding to create a circular video

And here's the URL that's automatically generated and rendered from the above code:

Similar to image transformations, there are alternative ways to apply transformations to your videos.

Plugins

The Cloudinary React SDK provides plugins to render the media on your site in the optimal way and improve your user's experience by automating media tasks like lazy loading, responsive images and more.

Sample projects

Take a look at the React sample projects page to help you get started integrating Cloudinary into your React application.

✔️ Feedback sent!

✖️  

How helpful was this doc page?

Page rating:

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

What were you looking for?

What was good?

What should be improved?

Want us to get back to you?

* Email:

Name:

Cloud name:

Send Your Feedback

---

Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Try Again

Rate this page: