Welcome

About this project

This is the home of our Javascript libraries. These libraries can be used to render the Cloudinary images generated by @cloudinary/base. Our library also includes the following advanced functionality plugins.

• accessibility.
• lazyload.
• placeholder.
• responsive.

Installation

npm install @cloudinary/base 
npm install @cloudinary/react
npm install @cloudinary/angular

Simple usage

// Import the cloudinary class, and the plugins you want to use
// In this case, we import a cloudinary image type and accessibility and responsive.

import React, { Component } from 'react'
import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
import { CldImg, accessibility, responsive } from '@cloudinary/react';

 const App = () => {
  let img = new CloudinaryImage()
    .setConfig({
      cloud: {
        cloudName: 'demo'
      }})
    .setPublicID('sample');

  return (
    <div>
      <CldImg transformation={img} plugins={[responsive(), accessibility()]}/>
    </div>
  )
};

Plugin Order

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