> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK (Legacy)


> **INFO**:
>
> This is the **legacy** version of the React SDK (`cloudinary-react` v1.x).
> For details on migrating to the [current version](react_integration) of the SDK (`frontend-frameworks` v1.x + `js-url-gen` v1.x), see the [React SDK migration guide](react1_migration_guide).

## Overview
Cloudinary's React SDK provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing React application.

You might also want to know...

* If you're brand new to Cloudinary, you may want to start with the [Developer Kickstart](dev_kickstart) for a hands-on, step-by-step introduction to Cloudinary features. 
* You may also find our [Glossary](cloudinary_glossary) helpful to understand Cloudinary-specific terminology.
* Keep in mind that this guide focuses on how to set up and implement popular Cloudinary capabilities using the React SDK, but it doesn't cover every feature or option. The complete documentation for all Cloudinary features including sample code for each SDK can be found in our [Guides](programmable_media_guides) and [References](cloudinary_references).

> **READING**: :no-title

**This guide relates to the latest released version of the [cloudinary-react v1.x](https://github.com/cloudinary/cloudinary-react) library.**

For details on all new features and fixes from previous versions, see the [CHANGELOG](https://github.com/cloudinary/cloudinary-react/blob/master/CHANGELOG.md). 

If you haven't already started integrating this SDK, you may want to try the [JavaScript js-url-gen](javascript_integration) library together with the new [React frontend-frameworks library](react_integration).

## Quick example

Take a look at the following transformation code and the image it delivers:

![sample transformation](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/e_brightness:90/o_60/c_scale,w_50/fl_layer_apply,g_south_east,x_5,y_5/a_10/front_face.png "secure: true, disable_all_tab: true, with_url: false, frameworks:react")

```react
<Image publicId="front_face.png" >
	<Transformation gravity="face" height="150" width="150" crop="thumb" />
	<Transformation radius="20" />
	<Transformation effect="sepia" />
	<Transformation overlay="cloudinary_icon" />
	<Transformation effect="brightness:90" />
	<Transformation opacity="60" />
	<Transformation width="50" crop="scale" />
	<Transformation flags="layer_apply" gravity="south_east" x="5" y="5" />
	<Transformation angle="10" />
</Image>
```

This relatively simple code performs all of the following on the original front_face.jpg image before delivering it:

* **Crop** to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
* **Round the corners** with a 20 pixel radius
* Apply a **sepia effect**
* **Overlay the Cloudinary logo** on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%)
* **Rotate** the resulting image (including the overlay) by 10 degrees
* **Convert** and deliver the image in PNG format (the originally uploaded image was a JPG)

And here's the URL that would be included in the image tag that's automatically generated from the above code:

![sample transformation](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/e_brightness:90/o_60/c_scale,w_50/fl_layer_apply,g_south_east,x_5,y_5/a_10/front_face.png "secure: true, disable_all_tab: true, with_code:false, with_image:false")

In a similar way, you can [transform a video](react1_video_manipulation#video_transformation_examples).

> **Learn more about transformations**:
>
> * See all possible transformations in the [Transformation URL API reference](transformation_reference).

> * See more examples of [image](react1_image_manipulation) and [video](react1_video_manipulation) transformations using the `cloudinary-react v1.x` library.

## React SDK features

* Build URLs for [image](react1_image_manipulation) and [video](react1_video_manipulation) transformation
* [Helper elements](react1_image_manipulation#deliver_and_transform_images) for embedding and transforming images, and more

## Installation and Setup 

### 1. Install the React SDK

The Cloudinary React SDK serves as a layer on top of Cloudinary's JavaScript (`cloudinary-core`) library. Install the SDKs by running the following command:

```react
npm install cloudinary-react
```

### 2. Include the required elements of the cloudinary-react library in your code

The following 4 elements are available:

```react
import {Image, Video, Transformation, CloudinaryContext} from 'cloudinary-react';
```

* CloudinaryContext - allows you to define shared parameters that are applied to all child elements.
* Image - defines a Cloudinary Image tag.
* Video - defines a Cloudinary Video tag.
* Transformation - allows you to define additional transformations on the parent element.

### 3. Set Cloudinary configuration parameters.

To use the Cloudinary React elements, you must configure at least your Cloudinary product environment `cloudName`. You can additionally define a number of optional [configuration parameters](cloudinary_sdks#configuration_parameters) if relevant. You can find your product environment configuration credentials in the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings. You can apply these settings directly to each element, or you can apply them to all child elements using a `CloudinaryContext` element.

> **NOTES**:
>
> * Most functionality implemented on the client side doesn't require authentication, so only your `cloud_name` is _required_ to be configured, and not your API key or secret. Your API secret should never be exposed on the client side, so if you want to use [signed uploads](upload_images#authenticated_requests) or [generate delivery signatures](delivery_url_signatures), you'll also need server-side code, for which you can use one of our [backend SDKs](cloudinary_sdks#cloudinary_sdks).* For backward compatibility reasons, the default value of the optional `secure` configuration parameter is `false`. However, for most modern applications, it's recommended to configure the `secure` parameter to `true` to ensure that your transformation URLs are always generated as HTTPS.

For example:

* Configuration directly in the element:

```react
<Image cloudName="demo" secure=true upload_preset="my_unsigned_preset" publicId="sample" />
  <Transformation width="400" height="250" gravity="south" crop="fill" />
</Image>  
```

* Configuration with `CloudinaryContext` applies to all child elements:

```react
<CloudinaryContext cloudName="demo" secure="true" upload_preset="my_unsigned_preset">
  <Image publicId="sample" />
  ...
  ...
</CloudinaryContext>
```

## Using core Cloudinary JavaScript features

The [JavaScript cloudinary-core](javascript1_integration) (legacy) library is the foundation library underlying Cloudinary's React SDK. You can access any of the core JavaScript functionality within your React code after importing the core library. For example:

```react
import {Cloudinary} from 'cloudinary-core';
const cloudinaryCore = new cloudinary.Cloudinary({cloud_name: 'demo'});
const SampleImg = () => (
    <img src={cloudinaryCore.url('sample')} />
);
```

## React capitalization and data type guidelines

When using the React SDK, keep these guidelines in mind: 

* Parameter names: `camelCase`. For example: **publicId**
* Classes: `PascalCase`. For example: **ImageTag**
* Methods: `camelCase`. For example: **toHTML**
* Pass parameter data as: `Object`

## Samples

See our React Photo Album sample project that includes code for uploading files, deleting files, and using dynamic lists: [https://github.com/cloudinary/cloudinary-react/tree/master/samples/photo_album](https://github.com/cloudinary/cloudinary-react/tree/master/samples/photo_album)

## React Storybook tool

You can try out Cloudinary components quickly and easily with our React SDK [Storybook](https://cloudinary.github.io/cloudinary-react), which provides you with a rich visual interface, code playground and inline documentation. 

To start using the storybook, select a component from the left-hand menu. Depending on which component you choose, you can either display an asset from your own Cloudinary product environment, experiment by changing parameters, and view the results, or you can scroll and view many different examples of implementations enabled by your selected Cloudinary component. 

Either way, when you've found your desired effect, you can copy the code to conveniently implement the results.

![React_Storybook_Screencap](https://cloudinary-res.cloudinary.com/image/upload/v1627221468/docs/screencap_react_storybook.png "with_code:false, with_url:false, popup:true, thumb: w_400,dpr_2, width: 400")

> **READING**:
>
> * [React image and video upload](react1_image_and_video_upload)

> * [React image transformations](react1_image_manipulation)

> * [React video transformations](react1_video_manipulation)