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
}

Dependencies (2)

Dev Dependencies (11)

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