Nuclear Powered Mushroom

    @cloudinary/react
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0 • Public • Published

    Cloudinary React SDK

    About

    The Cloudinary React SDK allows you to quickly and easily integrate your application with Cloudinary. Effortlessly optimize and transform your cloud's assets.

    Note

    This Readme provides basic installation and usage information. For the complete documentation, see the React SDK Guide.

    Table of Contents

    Key Features

    Version Support

    SDK Version React 16 React 17 React 18
    1.0.0 & up V V V

    Installation

    Install using your favorite package manager (yarn, npm)

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

    Or

    yarn add @cloudinary/url-gen @cloudinary/react --save

    Usage

    Setup

    import React from 'react';
    import { AdvancedImage } from '@cloudinary/react'
    import { Cloudinary } from '@cloudinary/url-gen';

    Transform and Optimize Assets

    import React, { Component } from 'react'
    
    import { AdvancedImage } from '@cloudinary/react'
    import { Cloudinary } from '@cloudinary/url-gen';
    
    const myCld = new Cloudinary({
      cloud: {
        cloudName: "demo",
      },
    });
    
    let img = myCld.image('sample');
    
    const App = () => {
      return <AdvancedImage cldImg={img}/>
    };
    ```
    

    Generate Image and Video HTML Tags

    - Use <AdvancedImage> to generate image tags
    - Use <AdvancedVideo> to generate video tags
    

    Advanced Plugin Features

    import { CloudinaryImage } from "@cloudinary/url-gen";
    import {
      lazyload,
      responsive,
      accessibility,
      placeholder
    } from "@cloudinary/react";
    
    cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" });
    
    const App = () => {
      return <AdvancedImage cldImg={img} plugins={[lazyload(),responsive(), accessibility(), placeholder()]} />;
    };

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

    File upload

    This SDK does not provide file upload functionality, however there are several methods of uploading from the client side.

    Contributions

    • Ensure tests run locally (npm run test)
    • Open a PR and ensure Travis tests pass

    Get Help

    If you run into an issue or have a question, you can either:

    About Cloudinary

    Cloudinary is a powerful media API for websites and mobile apps alike, Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs. Ultimately, viewers enjoy responsive and personalized visual-media experiences—irrespective of the viewing device.

    Additional Resources

    Licence

    Released under the MIT license.

    Keywords

    none

    Install

    npm i @cloudinary/react

    DownloadsWeekly Downloads

    11,037

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    832 kB

    Total Files

    11

    Last publish

    Collaborators

    • cloudinary