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.
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
- Rename your
.env.exampleto.envand add your keys to the.envfile. - In your terminal run
npm ito install all the dependencies. - In your terminal run
npm run devto run the frontend.
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.
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.
@cloudinary/react@cloudinary/url-gen
Visit our sample projects we have created for you to learn more about Cloudinary and the usage of the React SDK in our docs.
Engage in collaborative coding, connect with fellow enthusiasts, and gather insights from a vibrant open-source network over on Twitter, Discord, or the Community Forums
Give a ⭐️ if this project helped you, and watch this repo to stay up to date.