https://github.com/cloudinary-devs/cloudinary-react-template

Speed up your process of integrating Cloudinary in with this React repo that has the core things you need to start development using the power of Cloudinary
https://github.com/cloudinary-devs/cloudinary-react-template

cloudinary image-manipulation javascript react reactjs webapp

Last synced: about 2 months ago
JSON representation

Speed up your process of integrating Cloudinary in with this React repo that has the core things you need to start development using the power of Cloudinary

• Host: GitHub
• URL: https://github.com/cloudinary-devs/cloudinary-react-template
• Owner: cloudinary-devs
• Created: 2024-09-05T23:35:34.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-10T06:28:59.000Z (4 months ago)
• Last Synced: 2024-09-10T09:34:32.196Z (4 months ago)
• Topics: cloudinary, image-manipulation, javascript, react, reactjs, webapp
• Language: TypeScript
• Homepage:
• Size: 38.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Cloudinary Developers](https://github.com/cloudinary-devs/.github/blob/main/assets/cloudinary-banner.png?raw=true)



  


  Twitter

      -  

  Cloudinary

      -  

  Docs

      -  

  Code Samples

      -  

  Blog

      -  

  Community

  


  




# Cloudinary React Template

This repository provides a ready-to-use template for integrating the Cloudinary widget into your React project. It includes all the essential components and setup needed to start working with Cloudinary, simplifying the process of adding Cloudinary’s powerful image and video management capabilities to your application.

Additionally, the repo features examples demonstrating how to perform image transformations using the Cloudinary React SDK, giving you a solid foundation to build upon and customize for your specific needs.

## Prerequisites

Before you begin, ensure you have the following installed:

- Node.js (v18 or above)

- npm (v10 or above)

- A Cloudinary account with:

  - A project

  - An upload preset

## Run the App

1. Rename your `.env.example` to `.env` and add your keys to the `.env` file.

2. In your terminal run `npm i` to install all the dependencies.

3. In your terminal run `npm run dev` to run the frontend.

## Cloudinary Transformations

Cloudinary's dynamic URL transformations enable you to programmatically generate multiple variations of your high quality original images on the fly, without the need for graphic designers and fancy editing tools.

To learn more about the Cloudinary transformations visti the [SDK docs](https://cloudinary.com/documentation/image_transformations).

## Cloudinary Upload Widget

Cloudinary's Upload widget is a complete, interactive user interface that enables your users to upload files from a variety of sources to your website or application. The widget, requiring just a couple lines of code to integrate, eliminates the need to develop in-house interactive media upload capabilities.

To learn more aboout the Upload Widget visit the [API reference](https://cloudinary.com/documentation/upload_widget_reference).

## Cloudinary NPM packages

- `@cloudinary/react`

- `@cloudinary/url-gen`

## Cloudinary React Sample Project

Visit our sample projects we have created for you to learn more about Cloudinary and the usage of the React SDK in our [docs](https://cloudinary.com/documentation/react_sample_projects).

## Cloudinary Community

Engage in collaborative coding, connect with fellow enthusiasts, and gather insights from a vibrant open-source network over on [Twitter](https://twitter.com/cloudinary), [Discord](https://discord.gg/cloudinary), or the [Community Forums](https://community.cloudinary.com/)

## Show your support

Give a ⭐️ if this project helped you, and watch this repo to stay up to date.