ReactSDK

Description

The Cloudinary React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary. The SDK also comes with support for optional JS plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness.

Examples

Please note that the order of the plugins is important. See Plugin Order for more details.

// Example
			import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
			import {
			 AdvancedImage,
			 accessibility,
			 responsive,
			 lazyload,
			 placeholder
			} from '@cloudinary/react';
			
			const App = () => {
			
			const myCld = new Cloudinary({ cloudName: 'demo'});
			let img = myCld().image('sample');
			
			  return (
			     <div>
			        <div style={{height: "1000px"}}/>
			        <AdvancedImage
			           cldImg={img}
			           plugins={[lazyload(), responsive(100), placeholder()]}
			        />
			     </div>
			  )
			};