React SDK v2 quickstart guide (Beta)

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

Two libraries are required:

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

1. Install packages

Install the required packages using the NPM package manager:

Copy to clipboard
npm i @cloudinary/base @cloudinary/react

2. Add Cloudinary to your code

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

import React from 'react'
import {AdvancedImage} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/base";

// Import any actions required for transformations.
import {fill} from "@cloudinary/base/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, 'sample'.
  const myImage = cld.image('sample'); 

  // 4. Transform your image

  // Resize to 250 x 250 pixels using the 'fill' crop mode.

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

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


3. See the result!

Transformed sample image

Ready to learn more?

  • See some complete code examples in our sample projects.
  • Understand the architecture of the React SDK v2 and get a more detailed overview of the libraries.
  • Find out more about transforming images using cloudinary-js-base.
  • Learn about transforming videos using cloudinary-js-base.
  • Discover ways to improve load times and make your images responsive and accessible using plugins.

✔️ Feedback sent!

Rate this page: