react-cdnvision
v0.1.20
Published
Resize, crop, and process images in the cloud, simply by changing their URLs
Downloads
16
Maintainers
Readme
React CDN Vision
Resize, crop, and process images in the cloud, simply by changing their URLs.
Install
npm install react-cdnvision
Support us
Star this project on GitHub.
Usage
Basic example
import { Component } from 'react';
import CDNVisionProvider, { Img } from 'react-cdnvision';
export default class Example extends Component {
render() {
return (
<CDNVisionProvider name="your-name">
<Img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Cirrus_sky_panorama.jpg" alt="my image" width="200" />
</CDNVisionProvider>
);
}
}
will render
<img src="http://image.cdnvision.com/your-name/https://upload.wikimedia.org/wikipedia/commons/3/36/Cirrus_sky_panorama.jpg?width=200" width="200" alt="my image" />
Cover example
import { Component } from 'react';
import CDNVisionProvider, { Cover } from 'react-cdnvision';
export default class Example extends Component {
render() {
return (
<CDNVisionProvider name="your-name">
<Cover src="https://upload.wikimedia.org/wikipedia/commons/3/36/Cirrus_sky_panorama.jpg" width="1600">
<h1>This is text inside cover image</h1>
</Cover>
</CDNVisionProvider>
);
}
}
will render
<div style="background-size: cover; background-position: center;background-image: http://image.cdnvision.com/your-name/https://upload.wikimedia.org/wikipedia/commons/3/36/Cirrus_sky_panorama.jpg?width=1600;">
<h1>This is text inside cover image</h1>
</div>