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:

Tip
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.
  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!

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: