Cloudinary Frontend Frameworks

About this project

This project contains SDKs designed to work with Cloudinary url-gen.
These SDKs render CloudinaryImage or CloudinaryVideo objects into the DOM.

Packages contained within this project:

• The React SDK used to render an image & video component. NPM | Reference
• The Angular SDK used to render an image & video component. NPM | Reference

Each SDK also contains advanced features in the form of plugins, which extend the native HTMLImage and HTMLVideo elements.

• accessibility - Used to make your images more accessible to your users with visual disabilities.
• lazyload - Used to delay loading images if they are not yet visible on the screen.
• placeholder - Used to display a lightweight version of an image while the target image is downloading.
• responsive - Used to resize your images automatically based on the viewport size.

Development setup

To build and link project:

• clone project
• npm run quickstart

Installation

To get started, install the npm client package of your choice along with our base package. For example, to use Cloudinary in a React environment, the following packages should be installed:

npm i @cloudinary/react @cloudinary/url-gen

Note: To use Angular install @cloudinary/ng.

Simple usage

The following is a simple example using React. For more information on React and other frameworks, navigate to the specific reference using the Packages menu.

import React from 'react'
// Cloudinary is used to configure your account and generate urls for your media assets
import {Cloudinary} from "@cloudinary/url-gen";
// Import the cloudinary media component (AdvancedImage / AdvancedVideo),
// and the plugins you want to use.
import {AdvancedImage, accessibility, responsive} from '@cloudinary/react';

// Once per project/app - configure your instance.
// See the documentation of @cloudinary/url-gen for more information.
const myCld = new Cloudinary({cloud: {cloudName: 'demo'}});

export const App = () => {
  // Create a new image object:
  const img = myCld.image('sample');

  // Render your component.
  return (
    <div>
      <AdvancedImage cldImg={img} plugins={[responsive(), accessibility()]}/>
    </div>
  )
};

Plugin Order

<AdvancedImage plugins={[lazyload(), responsive(), accessibility(), placeholder()]}/>