react-cloudinary-lite
v0.1.6
Published
A simple and lightweight React component for cloudinary resources
Downloads
12
Maintainers
Readme
react-cloudinary-lite
A simple and lightweight React component for cloudinary resources
Installation
npm install --save react-cloudinary-lite
Usage
CloudinaryLite
component return a tag (video or image) with resource from cloudinary.
Set cloud_name in yout app context:
class MyApp extends React.Component {
getChildContext() {
return { cloudName: 'myCloudName' };
}
}
render() {
<MainComponent />
}
MyApp.childContextTypes = {
cloudName: React.PropTypes.string,
};
Use the component in easy way:
import CloudinaryLite from 'react-cloudinary-lite'
class MainComponent extends React.Component {
render() {
<CloudinaryLite src="myImg.png" transformations={{width: 480, height:800, angle:'h_flip'}}/>
}
}
it will render:
<img src='http://res.cloudinary.com/myCloudName/image/upload/w_480,h_800,a_hflip/myImg.png'>
Or custom use:
import CloudinaryLite from 'react-cloudinary-lite'
class MainComponent extends React.Component {
render() {
<CloudinaryLite src="myImg.png" isInBackground={true} component={<i/>} transformations={{width: 480, height:800}}/>
}
}
it will render:
<i style="background-image: url(http://res.cloudinary.com/myCloudName/image/upload/w_480,h_800,a_hflip/myImg.png)" />
License
MIT Licensed. Copyright (c) Futurecommerce 2016.