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.

Installation

Prerequisites

You can create an account on the Cloudimage registration page.

Install the component

You can install react-cloudimage-responsive using npm or yarn:

npm install react-cloudimage-responsive

or

yarn add react-cloudimage-responsive

Usage

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.

Configuration options

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

Properties

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.