React quick start

This quick start lets you get an end-to-end implementation up and running using the React SDK in 5 minutes or less.

On this page:

• Prerequisites
• 1. Set up and configure the SDK
  • Install the packages
  • Configure Cloudinary
• 2. Upload an image
• 3. Transform and deliver the image
• 4. Run your code
• View the completed code

Rate this page:

Prerequisites

1. Set up and configure the SDK

Install the packages

Install the required packages using the NPM package manager:

npm i @cloudinary/url-gen @cloudinary/react

Configure Cloudinary

Create a basic React app, and in App.js copy and paste the following:

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

const App = () => {

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

2. Upload an image

If you changed the cloud name in the previous step to your own, you need to use an image that's stored in your Cloudinary product environment for the next steps. All new accounts come with sample images, so you can use one of those, or, if you want to use the same image as us, save this image locally, then upload it to Cloudinary.

For the purposes of this quick start, the quickest way to upload a single image is as follows:

1. Log into your Cloudinary Console.
2. Select Media Library from the left panel.
3. Click Upload to open the Upload Widget, then click Advanced and type "docs/models" into the public ID field.
4. Click Browse to find the image to upload. Once uploaded, you can see the image in the listed assets (set Creation date to Today in the Search to find it quickly).
   

In the next step, you'll need the public ID of whichever image you use (in our case, we set the public ID on upload to docs/models). If using one of the sample images, double click the asset to open the Manage page, navigate to the Summary tab, and copy the Public ID:

3. Transform and deliver the image

Copy and paste these import statements below the existing ones:

import {AdvancedImage} from '@cloudinary/react';
import {fill} from "@cloudinary/url-gen/actions/resize";

Copy and paste the following code in the App function, under the configuration code:

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

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

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

4. Run your code

Run the code to see the transformed image.

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

View the completed code

Here's the full example:

This code is also available in GitHub.