React SDK quickstart guide

In this quickstart guide you'll learn how to start delivering your media from Cloudinary using React.

Two libraries are required:

Tip
To get a more in-depth understanding of the architecture, you may want to start from the React SDK introduction.

On this page:

1. Install packages

Install the required packages using the NPM package manager:

Copy to clipboard
npm i @cloudinary/url-gen @cloudinary/react --save

2. Add Cloudinary to your code

Note
This step assumes that you have assets already uploaded in your account. To upload files within your app, see React SDK image and video upload. Additionally, you can use the CLI to upload files programmatically, or log into your Media Library to upload files manually.

Copy to clipboard
// 1. Import classes
// ==================

import React from 'react'
import {AdvancedImage} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";

// Import any actions required for transformations.
import {fill} from "@cloudinary/url-gen/actions/resize";

const App = () => {


  // 2. Set your cloud name
  //========================

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


  // 3. Get your image
  //===================

  // Instantiate a CloudinaryImage object for the image with the public ID, 'docs/models'.
  const myImage = cld.image('docs/models'); 


  // 4. Transform your image
  //=========================

  // Resize to 250 x 250 pixels using the 'fill' crop mode.
  myImage.resize(fill().width(250).height(250));


  // 5. Deliver your image
  // =========================

  // Render the image in a React component.
  return (
    <div>
      <AdvancedImage cldImg={myImage} />
    </div>
  )

};

3. See the result!

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/c_fill,h_250,w_250/docs/models
Transformed models image

4. Try it yourself

Here's the code in a fully functioning React app, along with some other examples that you'll find throughout this guide. It's structured a little differently from above - each transformation example has its own JavaScript file showing the imports and syntax required (use the hamburger menu to see the other files).

App.js imports all the functions and uses AdvancedImage and AdvancedVideo components to display the transformed images and videos on a simple web page.

This code is also available in GitHub.

Ready to learn more?

  • Understand the architecture of the React SDK and get a more detailed overview of the libraries.
  • Find out more about transforming images using @cloudinary/url-gen.
  • Learn about transforming videos using @cloudinary/url-gen.
  • Discover ways to improve load times and make your images responsive and accessible using plugins.

✔️ Feedback sent!

Rate this page: