Commercetools tutorial
Commercetools implementation
The react-cloudimage-responsive library is a React component that allows you to easily add responsive images to your web application using the Cloudimage service. With this package, you can load and display optimized images that are automatically resized based on the device screen size and pixel density.
It is a simple and easy-to-use package that can help you improve the performance and user experience of your web application by optimizing it.
npm install react-cloudimage-responsive
or
yarn add react-cloudimage-responsive
To use react-cloudimage-responsive, you need to provide it with a Cloudimage URL and some additional parameters. Here's an example:
import React from 'react';
import CloudimageResponsive from 'react-cloudimage-responsive';
const MyComponent = () => {
const cloudimageConfig = {
token: 'your-token',
baseURL: 'https://your-subdomain.cloudimg.io/v7/',
params: {
resize: {
width: 500,
height: 500,
type: 'fit',
},
quality: 90,
format: 'webp',
},
};
return (
<CloudimageResponsive
alt="My Image"
image="https://example.com/my-image.jpg"
cloudimageConfig={cloudimageConfig}
/>
);
};
In this example, we're passing three props to the "CloudimageResponsive" component:
- alt: The alternate text to display for the image. This is required for accessibility reasons.
- image: The URL of the original image to be optimized and resized by Cloudimage.
- cloudimageConfig: An object that contains the Cloudimage configuration parameters. This includes your Cloudimage API token, the base URL of your Cloudimage service, and the resizing, quality, and format parameters for the image.
Here are the configuration parameters you can use in the "cloudimageConfig" object:
token
Type: String | Default: "demo" | required
Your Cloudimage customer token. Subscribe for a Cloudimage account to get one. The subscription takes less than a minute and is totally free.
customDomain
Type: String | Default: "cloudimage.io" | optional
If you use a custom CNAME for your cloudimage integration, you can set it here.
baseURL
Type: String | Default: "/" | optional
Your image folder on server, this alows to shorten your origin image URLs.
apiVersion
Type: String |Default: 'v7' | optional
Allow to use a specific version of API.
- set a specific version of API
const cloudimageConfig = {
token: 'demo',
baseURL: 'https://cdn.scaleflex.it/demo/',
apiVersion: 'v7' // optional
};
- disable API version
const cloudimageConfig = {
token: 'demo',
baseURL: 'https://cdn.scaleflex.it/demo/',
apiVersion: null // optional
};
Note: this will disregard your token above as this should be built into the CNAME entry.
doNotReplaceURL
Type: bool | Default: false
If set to true the plugin will only add query params to the given source of image.
lazyLoading
Type: Bool | Default: true | optional
Only images close to the client's viewport will be loaded, hence accelerating the page loading time. The plugin uses react-lazyload library to achieve it.
lazyLoadOffset
Type: Number/Array(Number) | Default: 100
Say if you want to preload a component even if it's 100px below the viewport (user have to scroll 100px more to see this component), you can set offset props to 100. On the other hand, if you want to delay loading a component even if it's top edge has already appeared at viewport, set offset to negative number.
Library supports horizontal lazy load out of the box. So when you provide this prop with number like 100 it will automatically set left edge offset to 100 and top edge to 100;
If you provide this prop with array like [100, 200], it will set left edge offset to 100 and top offset to 200.
params
Type: String | Default: 'org_if_sml=1' | optional
Applies default Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation... Multiple params can be applied, separated by "&" e.g. wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1
params: 'org_if_sml=1'
alternative syntax: type: Object
params: {
org_if_sml: 1,
grey: 1,
...
}
placeholderBackground
Type: String | Default: '#f4f4f4' | optional
Placeholder coloured background while the image is loading or use it to set your custom placeholder image or gif
For example:
placeholderBackground: "url('https:/
https://cdn.scaleflex.it/filerobot/red-loader.gif
') 50% 50% no-repeat"
lowQualityPreview
Type: Object
lowQualityPreview.minImgWidth number (default: 400) - minimum width of an image to load a low-quality preview image
lowQualityPreview: {
minImgWidth = 400
}
presets
Type: Object
Default:
const cloudimageConfig = {
token: 'demo',
baseUrl: 'https://cdn.scaleflex.it/demo/',
...
presets: {
xs: '(max-width: 575px)', // up to 575 PHONE
sm: '(min-width: 576px)', // 576 - 767 PHABLET
md: '(min-width: 768px)', // 768 - 991 TABLET
lg: '(min-width: 992px)', // 992 - 1199 SMALL_LAPTOP_SCREEN
xl: '(min-width: 1200px)' // from 1200 USUALSCREEN
}
};
Breakpoints shortcuts to use in image size property, can be overridden.
limitFactor
Type: Number | Default: 100 | optional
Rounds up the size of an image to the nearest limitFactor value.
For example:
- For an image with width 358px and limitFactor equal to 100, the plugin will round up to 400px.
- For an image with width 358px and limitFactor equal to 5, the plugin will round up to 360px.
devicePixelRatioList
Type: [Number,...] | Default: [1, 1.5, 2] | optional
List of supported device pixel ratios. If there is no need to support retina devices, you should set an empty array devicePixelRatioList: [].
delay
Type: Number | optional
Delay for processing an image after rendering component.
NOTE: Normally, the parameter is not needed but in some cases with integrating third-party libraries, it can fix wrong calculation of image container.
ImageSizeAttributes
Type: String | possible values: 'use', 'ignore', 'take-ratio' | Default: 'use'
If width and height attributes are set:
use - width & height attributes values will be used to calculate image size (according to user's DPR) and ratio.
take-ratio - width & height attributes values will be used only to calculate ratio.
ignore - width & height attributes will be ignored.
If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
Note: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
Here are the properties you can use with the "CloudimageResponsive" component:
- alt: The alternate text to display for the image. This is required for accessibility reasons.
- image: The URL of the original image to be optimized and resized by Cloudimage.
- cloudimageConfig: An object that contains the Cloudimage configuration parameters.
- className: An optional class name to apply to the image container.
- style: An optional object that contains CSS styles to apply to the image container.
Last modified 1mo ago