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
CloudinaryProvider
1. Wrap your application with 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
useCloudinary
hook to access the Cloudinary client
2. Use the 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.