Cloudinary React Provider

A React library that provides a Context Provider for easy integration of Cloudinary in your React applications.

Installation

npm install cloudinary-react-provider @cloudinary/url-gen @cloudinary/react

Usage

1. Wrap your application with CloudinaryProvider

Wrap your application with the CloudinaryProvider at the root level to provide the Cloudinary client to all components.

import React from 'react'
import { CloudinaryProvider } from 'cloudinary-react-provider'

const App = () => {
  return (
    <CloudinaryProvider cloudName='your-cloud-name'>{/* Your application components go here */}</CloudinaryProvider>
  )
}

export default App

2. Use the useCloudinary hook to access the Cloudinary client

Use the useCloudinary hook in any component to access the Cloudinary client instance.

import React from 'react'
import { useCloudinary } from 'cloudinary-react-provider'
import { AdvancedImage } from '@cloudinary/react'

const MyComponent = () => {
  const { client } = useCloudinary()
  const image = client.image('image_public_id')
  // Use the cloudinary instance here

  return (
    <div>
      <AdvancedImage cldImg={myImage} />
    </div>
  )
}

export default MyComponent

License

This project is licensed under the MIT License - see the LICENSE.md file for details.