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

1.0.3 • Public • Published

react-easy-cloudinary

npm version

This is an easy to use wrapper for cloudinary-react that is written in TypeScript.

Use this library if you just want to use Cloudinary images in your TypeScript project without any fuss until their new SDK with TypeScript support is ready.

https://cloudinary.com/

installation

// npm
npm install react-easy-cloudinary

// yarn
yarn add react-easy-cloudinary

usage

import React from "react"
import { CloudinaryImage, CloudinaryProvider } from "react-easy-cloudinary"

export default function App() {
  return (
    <CloudinaryProvider cloudinaryId="doqodlq85">
      <CloudinaryImage
        publicId="claybell-net/keyboards/stainless1.jpg"
        width={300}
        resize="scale"
      />
      <CloudinaryImage
        publicId="claybell-net/keyboards/stainless1.jpg"
        width={100}
        height={60}
        resize="fill"
      />
      <CloudinaryImage
        publicId="claybell-net/keyboards/stainless1.jpg"
        width={300}
        height={50}
        resize="fill"
        fullWidth
      />
    </CloudinaryProvider>
  )
}

Props

These are the component props

interface CloudinaryImageProps {
  /** Your publicId for your image */
  publicId: string
  /** Used when resize property is set */
  width?: number
  /** Used when resize property is set */
  height?: number
  /** Scale to resize, fill to resize and crop */
  resize?: "scale" | "fill"
  /** For responsive design to stretch image 100% width space available to it */
  fullWidth?: boolean
}

/react-easy-cloudinary/

    Package Sidebar

    Install

    npm i react-easy-cloudinary

    Weekly Downloads

    1

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    28.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • claytonfbell