{"id":27922,"date":"2023-08-11T07:00:00","date_gmt":"2023-08-11T14:00:00","guid":{"rendered":"http:\/\/Create-React-Image-Component"},"modified":"2025-11-27T11:58:00","modified_gmt":"2025-11-27T19:58:00","slug":"create-react-image-component","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/create-react-image-component","title":{"rendered":"Create a Responsive React Image Component With Cloudinary-React SDKs"},"content":{"rendered":"

Images are an important part of the web, so delivering the right image for the right device at the right time while maintaining optimized quality is very important.<\/p>\n

In this article, we\u2019ll go over a few techniques using Cloudinary-React SDK v2 and JavaScript SDK v2 to apply transformations to our images.<\/p>\n

Here\u2019s a link to the demo on CodeSandbox<\/a>.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Creating a Cloudinary Account<\/h2>\n

If you don\u2019t have a Cloudinary account yet, you can sign up<\/a> for a free account. Log in after creating your account, and on your dashboard page, you should see all your credentials (cloud name, etc.) We\u2019re only interested in the cloud name since that\u2019s what we\u2019ll need in our React application.<\/p>\n

Setting Up Your Project<\/h2>\n

Open your terminal and run the following command to bootstrap a React app with CRA<\/a> (create-react-app<\/code>) template in a folder called my-project<\/code>.<\/p>\n

    npx create-react-app my-project\n<\/code><\/span><\/pre>\n
The next step is to install the dependencies that we\u2019ll need in this project. Run the following command to install them.<\/p>\n
    npm<\/span> install<\/span> @cloudinary<\/span>\/url-gen @cloudinary\/react --save\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
We\u2019ll install the Cloudinary SDKs for our React application. The @Cloudinary\/url-gen<\/code> package is used to configure Cloudinary, create delivery URLs for our images, and apply transformations. The transformed images will be passed as an input to the component provided by the @cloudinary\/react<\/code> package, which will render the media on our site.<\/p>\n
Transforming Assets<\/h2>\n
Cloudinary provides us with different methods to apply transformations to our assets. We\u2019ll use the URL of a remote image on the web.<\/p>\n
Open your App.js<\/code> file and add the following to it.<\/p>\n
    import<\/span> { Cloudinary } from<\/span> \"@cloudinary\/url-gen\"<\/span>;\n    import<\/span> { AdvancedImage } from<\/span> \"@cloudinary\/react\"<\/span>;\n    import<\/span> { fill } from<\/span> \"@cloudinary\/url-gen\/actions\/resize\"<\/span>;\n    import<\/span> { Effect } from<\/span> \"@cloudinary\/url-gen\/actions\/effect\"<\/span>;\n    import<\/span> { byRadius } from<\/span> \"@cloudinary\/url-gen\/actions\/roundCorners\"<\/span>;\n    import<\/span> { byAngle } from<\/span> \"@cloudinary\/url-gen\/actions\/rotate\"<\/span>;\n    const<\/span> cld = new<\/span> Cloudinary({\n      cloud<\/span>: {\n        cloudName<\/span>: \"ifeomaimoh\"<\/span>\n      }\n    });\n    const<\/span> App = ()<\/span> =><\/span> {\n      const<\/span> file =\n        \"https:\/\/images.pexels.com\/photos\/2246476\/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940\"<\/span>;\n      let<\/span> image = cld.image(file);\n      image = image.setDeliveryType(\"fetch\"<\/span>);\n      image = image\n        .effect(Effect.sepia())\n        .resize(fill().height(500<\/span>).width(490<\/span>))\n        .roundCorners(byRadius().radius(40<\/span>))\n        .rotate(byAngle(20<\/span>));\n    \n      \/\/ This gives the full delivery URL of the tranformations applied above.<\/span>\n      console<\/span>.log({ url<\/span>: image.toURL() });\n    \n      return<\/span> (\n        <div<\/span> style<\/span>={{<\/span> padding:<\/span> \"5rem<\/span>\" }}><\/span>\n          <h1<\/span> style<\/span>={{<\/span> marginBottom:<\/span> \"50rem<\/span>\" }}><\/span>scroll to lazy load <\/h1<\/span>><\/span>\n          <AdvancedImage<\/span> cldImg<\/span>={image}<\/span> \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code snippet above, we\u2019ll import the Cloudinary<\/code> class, the AdvancedImage<\/code> React component, and some qualifiers that we\u2019ll use to build and transform our image URL. We\u2019ll start by configuring our Cloudinary instance with our cloud name. Inside the App component, we\u2019ll define and store the URL of a remote image in a variable called file<\/code>, then  instantiate a CloudinaryImage<\/code> object and pass the variable to it.<\/p>\n
We\u2019ll also specify how we want our image to be delivered. We\u2019ll set the delivery type to fetch<\/code> for our remote image by calling the setDeliveryType<\/code> method. We\u2019ll also transform our image using the transformation actions and qualifiers on the CloudinaryImage<\/code> object. We\u2019ll apply the sepia<\/code> effect to the image, resize it, add rounded corners, and rotate it.<\/p>\n
https:\/\/res.cloudinary.com\/<cloud_name>\/image\/<delivery type>\/<transformations>\/<file><\/code><\/p>\n
From the format above, we can see where the transformation parameters live.<\/p>\n
\n
The order in which you write transformations is important to get the desired effects.<\/p>\n<\/blockquote>\n
Finally, we\u2019ll pass the transformed image object to the cldImg<\/code> attribute in the AdvancedImage<\/code> component, which renders the image on our site. Open your terminal and start your application to see the transformed image.<\/p>\n
\"image<\/p>\n
Under the hood, the AdvancedImage<\/code> component will fetch the image from the webserver where it\u2019s located and then apply the transformations we specified.<\/p>\n
Optimizing Images<\/h2>\n
There are plugins provided by the Cloudinary React library that help optimize the way you render media on your site. Let\u2019s check out three of them, but let\u2019s first look at the quality transformation parameter.<\/p>\n