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 | {@link ReactSDK|Reference}
The Angular SDK used to render an image & video component. NPM | {@link AngularSDK|Reference}

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

{@link accessibility|accessibility} - Used to make your images more accessible to your users with visual disabilities.
{@link lazyload|lazyload} - Used to delay loading images if they are not yet visible on the screen.
{@link placeholder|placeholder} - Used to display a lightweight version of an image while the target image is downloading.
{@link responsive|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

We recommend the following order when using our plugins to achieve the best results:

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

You can omit any plugin, but the order from above should remain.

Contributors

Repository is using Conventional Commits. To publish packages please read instructions in sdk-scripts.

cloudinary/frontend-frameworks