Simple demo of react-cloudimage-responsive-blur-hash
\n![\"Demo](\"img.jpg\")
\n \n\t
\n\t\n\t\tDocs\n\t\t•\n\t\tDemo\n\t\t•\n\t\tCode Sandbox\n\t\t•\n\t\tWhy?\n\t\n
\n\nThis plugin detects the width of any image container as well as the device pixel ratio\ndensity to load the optimal image size needed.\nImages are resized on-the-fly via the Cloudimage service, thus offering a comprehensive\nautomated image optimization service.\n\nWhen an image is first loaded on your website or mobile app,\nCloudimage's resizing servers will download the origin image from\nthe source, resize it for the client's screen size and deliver to your users through one or multiple\nContent Delivery Networks (CDNs). The generated image formats are cached in the CDN and will be delivered rocket fast on any subsequent request.\n\n**NOTE:** Your original (master) images should be stored on a server\nor storage bucket (S3, Google Cloud, Azure Blob...) reachable over\nHTTP or HTTPS by Cloudimage. If you want to upload your master images to\nCloudimage, contact us at\n[hello@cloudimage.io](mailto:hello@cloudimage.io).\n\n\n\t
\n \n```\n\nNOTE: \"ratio\" is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold\nthe image position while image is loading.\n\n![\"edeit](\"https://codesandbox.io/static/img/play-codesandbox.svg\")
\n\n### BackgroundImg component:\n\n```html\n\n\n## Config\n\n### token\n\n###### Type: **String** | Default: **\"demo\"** | _required_\n\nYour Cloudimage customer token.\n[Subscribe](https://www.cloudimage.io/en/register_page) for a\nCloudimage account to get one. The subscription takes less than a\nminute and is totally free.\n\n### baseURL\n\n###### Type: **String** | Default: **\"/\"** | _optional_\n\nYour image folder on server, this alows to shorten your origin image URLs.\n\n### doNotReplaceURL\n\n###### Type: **bool** | Default: **false**\n\nIf set to **true** the plugin will only add query params to the given source of image.\n\n### lazyLoading\n\n###### Type: **Bool** | Default: **true** | _optional_\n\nOnly images close to the client's viewport will be loaded, hence accelerating the page loading time. The plugin uses\n[react-lazyload](https://github.com/twobin/react-lazyload) library to achieve it.\n\n### params\n\n###### Type: **String** | Default: **'org_if_sml=1'** | _optional_\n\nApplies default Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...\nMultiple params can be applied, separated by \"```&```\" e.g. wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1\n\n```javascript\nparams: 'org_if_sml=1'\n```\n\n#### alternative syntax: type: **Object**\n\n```javascript\nparams: {\n org_if_sml: 1,\n grey: 1,\n ...\n}\n```\n\n[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)\n\n### presets\n\n###### Type: **Object**\n\nDefault:\n\n```javascript\nconst cloudimageConfig = {\n token: 'demo',\n baseURL: 'https://jolipage.airstore.io/',\n ...\n presets: {\n xs: '(max-width: 575px)', // up to 575 PHONE\n sm: '(min-width: 576px)', // 576 - 767 PHABLET\n md: '(min-width: 768px)', // 768 - 991 TABLET\n lg: '(min-width: 992px)', // 992 - 1199 SMALL_LAPTOP_SCREEN\n xl: '(min-width: 1200px)' // from 1200 USUALSCREEN\n }\n};\n```\n\nBreakpoints shortcuts to use in image size property, can be overwridden.\n\n## Image properties\n\n### src\n\n###### Type: **String** | Default: **undefined** | _required_\n\nOriginal image hosted on your web server. You can use absolute path or\nrelative to baseURL in your config.\n\n**NOTES:**\n\nThe plugin uses a special algorithm to detect the width of image container and set the image size accordingly.\nThis is the recommended way of using the Cloudimage Responsive plugin.\n\n### sizes\n\n###### Type: **Object** | Default: **undefined**\n\n**{preset breakpoint (xs,sm, md,lg,xl) or media query + ' ' + image params}**:\n\n```jsx\n\n\t
\n\t\n\t\tDocs\n\t\t•\n\t\tDemo\n\t\t•\n\t\tCode Sandbox\n\t\t•\n\t\tWhy?\n\t\n
\n\nThis plugin detects the width of any image container as well as the device pixel ratio\ndensity to load the optimal image size needed.\nImages are resized on-the-fly via the Cloudimage service, thus offering a comprehensive\nautomated image optimization service.\n\nWhen an image is first loaded on your website or mobile app,\nCloudimage's resizing servers will download the origin image from\nthe source, resize it for the client's screen size and deliver to your users through one or multiple\nContent Delivery Networks (CDNs). The generated image formats are cached in the CDN and will be delivered rocket fast on any subsequent request.\n\n**NOTE:** Your original (master) images should be stored on a server\nor storage bucket (S3, Google Cloud, Azure Blob...) reachable over\nHTTP or HTTPS by Cloudimage. If you want to upload your master images to\nCloudimage, contact us at\n[hello@cloudimage.io](mailto:hello@cloudimage.io).\n\n\n\t
\n \n```\n\nNOTE: \"ratio\" is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold\nthe image position while image is loading.\n\n\n\n### BackgroundImg component:\n\n```html\n\n\n## Config\n\n### token\n\n###### Type: **String** | Default: **\"demo\"** | _required_\n\nYour Cloudimage customer token.\n[Subscribe](https://www.cloudimage.io/en/register_page) for a\nCloudimage account to get one. The subscription takes less than a\nminute and is totally free.\n\n### baseURL\n\n###### Type: **String** | Default: **\"/\"** | _optional_\n\nYour image folder on server, this alows to shorten your origin image URLs.\n\n### doNotReplaceURL\n\n###### Type: **bool** | Default: **false**\n\nIf set to **true** the plugin will only add query params to the given source of image.\n\n### lazyLoading\n\n###### Type: **Bool** | Default: **true** | _optional_\n\nOnly images close to the client's viewport will be loaded, hence accelerating the page loading time. The plugin uses\n[react-lazyload](https://github.com/twobin/react-lazyload) library to achieve it.\n\n### params\n\n###### Type: **String** | Default: **'org_if_sml=1'** | _optional_\n\nApplies default Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...\nMultiple params can be applied, separated by \"```&```\" e.g. wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1\n\n```javascript\nparams: 'org_if_sml=1'\n```\n\n#### alternative syntax: type: **Object**\n\n```javascript\nparams: {\n org_if_sml: 1,\n grey: 1,\n ...\n}\n```\n\n[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)\n\n### presets\n\n###### Type: **Object**\n\nDefault:\n\n```javascript\nconst cloudimageConfig = {\n token: 'demo',\n baseURL: 'https://jolipage.airstore.io/',\n ...\n presets: {\n xs: '(max-width: 575px)', // up to 575 PHONE\n sm: '(min-width: 576px)', // 576 - 767 PHABLET\n md: '(min-width: 768px)', // 768 - 991 TABLET\n lg: '(min-width: 992px)', // 992 - 1199 SMALL_LAPTOP_SCREEN\n xl: '(min-width: 1200px)' // from 1200 USUALSCREEN\n }\n};\n```\n\nBreakpoints shortcuts to use in image size property, can be overwridden.\n\n## Image properties\n\n### src\n\n###### Type: **String** | Default: **undefined** | _required_\n\nOriginal image hosted on your web server. You can use absolute path or\nrelative to baseURL in your config.\n\n**NOTES:**\n\nThe plugin uses a special algorithm to detect the width of image container and set the image size accordingly.\nThis is the recommended way of using the Cloudimage Responsive plugin.\n\n### sizes\n\n###### Type: **Object** | Default: **undefined**\n\n**{preset breakpoint (xs,sm, md,lg,xl) or media query + ' ' + image params}**:\n\n```jsx\n\n\n\t\t
\n\t\n\t\tDocs\n\t\t•\n\t\tDemo\n\t\t•\n\t\tCode Sandbox\n\t\t•\n\t\tWhy?\n\t\n
\n\nThis plugin detects the width of any image container as well as the device pixel ratio\ndensity to load the optimal image size needed.\nImages are resized on-the-fly via the Cloudimage service, thus offering a comprehensive\nautomated image optimization service.\n\nWhen an image is first loaded on your website or mobile app,\nCloudimage's resizing servers will download the origin image from\nthe source, resize it for the client's screen size and deliver to your users through one or multiple\nContent Delivery Networks (CDNs). The generated image formats are cached in the CDN and will be delivered rocket fast on any subsequent request.\n\n**NOTE:** Your original (master) images should be stored on a server\nor storage bucket (S3, Google Cloud, Azure Blob...) reachable over\nHTTP or HTTPS by Cloudimage. If you want to upload your master images to\nCloudimage, contact us at\n[hello@cloudimage.io](mailto:hello@cloudimage.io).\n\n\n\t
\n \n```\n\nNOTE: \"ratio\" is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold\nthe image position while image is loading.\n\n\n\n### BackgroundImg component:\n\n```html\n\n\n## Config\n\n### token\n\n###### Type: **String** | Default: **\"demo\"** | _required_\n\nYour Cloudimage customer token.\n[Subscribe](https://www.cloudimage.io/en/register_page) for a\nCloudimage account to get one. The subscription takes less than a\nminute and is totally free.\n\n### customDomain\n\n###### Type: **String** | Default: **\"cloudimage.io\"** | _optional_\n\nIf you use a custom CNAME for your cloudimage integration, you can set it here.\n\nNote: this will disregard your token above as this should be built into the CNAME entry.\n\n### baseURL\n\n###### Type: **String** | Default: **\"/\"** | _optional_\n\nYour image folder on server, this alows to shorten your origin image URLs.\n\n### apiVersion\n\n###### Type: **String** |Default: **'v7'** | _optional_\n\nAllow to use a specific version of API.\n\n- set a specific version of API\n```javascript\nconst cloudimageConfig = {\n token: 'demo',\n baseURL: 'https://jolipage.airstore.io/',\n apiVersion: 'v7' // optional\n};\n```\n- disable API version\n```javascript\nconst cloudimageConfig = {\n token: 'demo',\n baseURL: 'https://jolipage.airstore.io/',\n apiVersion: null // optional\n};\n```\n\n### domain\n\n###### Type: **String** | Default: **\"cloudimg.io\"**\n\nUse your custom domain.\n\n### doNotReplaceURL\n\n###### Type: **bool** | Default: **false**\n\nIf set to **true** the plugin will only add query params to the given source of image.\n\n\n\n### exactSize\n\n###### Type: **Bool** | Default: **false** | _optional_\n\nForces to load exact size of images.\nBy default the plugin rounds container width to next possible value which can be divided by 100 without the remainder.\nIt’s done for cache reasons so that not all images are cached by 1px, but only 100px, 200px, 300px …\n\n### lazyLoading\n\n###### Type: **Bool** | Default: **true** | _optional_\n\nOnly images close to the client's viewport will be loaded, hence accelerating the page loading time. The plugin uses\n[react-lazyload](https://github.com/twobin/react-lazyload) library to achieve it.\n\n### lazyLoadOffset\n\n###### Type: **Number/Array(Number)** | Default: **100**\n\nSay 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.\n\nLibrary 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;\n\nIf you provide this prop with array like [100, 200], it will set left edge offset to 100 and top offset to 200.\n\n### params\n\n###### Type: **String** | Default: **'org_if_sml=1'** | _optional_\n\nApplies default Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...\nMultiple params can be applied, separated by \"```&```\" e.g. wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1\n\n```javascript\nparams: 'org_if_sml=1'\n```\n\n#### alternative syntax: type: **Object**\n\n```javascript\nparams: {\n org_if_sml: 1,\n grey: 1,\n ...\n}\n```\n\n[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)\n\n### presets\n\n###### Type: **Object**\n\nDefault:\n\n```javascript\nconst cloudimageConfig = {\n token: 'demo',\n baseURL: 'https://jolipage.airstore.io/',\n ...\n presets: {\n xs: '(max-width: 575px)', // up to 575 PHONE\n sm: '(min-width: 576px)', // 576 - 767 PHABLET\n md: '(min-width: 768px)', // 768 - 991 TABLET\n lg: '(min-width: 992px)', // 992 - 1199 SMALL_LAPTOP_SCREEN\n xl: '(min-width: 1200px)' // from 1200 USUALSCREEN\n }\n};\n```\n\nBreakpoints shortcuts to use in image size property, can be overwridden.\n\n### limitFactor\n\n###### Type: **Number** | Default: **100** | _optional_\n\nRounds up size of an image to nearest limitFactor value.\n\nFor example\n* for an image with width **358px** and limitFactor equals **100** the plugin will round up to 400px\n* for an image with width **358px** and limitFactor equals **5** the plugin will round up to 360px\n\n\n### devicePixelRatioList\n\n###### Type: **[Number,...]** | Default: **[1, 1.5, 2]** | _optional_\n\nList of supported device pixel ratios. If there is no need to support retina devices, you should set empty array `devicePixelRatioList: []`\n\n### ImageSizeAttributes\n\n###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'** \n\nIf width and height attributes are set:\n\n**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**. \n\n**take-ratio** - width & height attributes values will be used only to calculate **ratio**.\n\n**ignore** - width & height attributes will be ignored.\n\nIf width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)\n\n*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute\n\n\n## Image properties\n\n### src\n\n###### Type: **String** | Default: **undefined** | _required_\n\nOriginal image hosted on your web server. You can use absolute path or\nrelative to baseURL in your config.\n\n**NOTES:**\n\nThe plugin uses a special algorithm to detect the width of image container and set the image size accordingly.\nThis is the recommended way of using the Cloudimage Responsive plugin.\n\n### blurhash\n\n###### Type: **String** | Default: **undefined** | _required_\n\nBlurHash is a very compact representation of a placeholder for an image. read more\n\n### width\n\n###### Type: **String** (e.g. 300px, 20vw) | Default: **undefined**\n\nIf it's set the plugin will use width as fixed value and change only according device pixel ratio.\n\n### height\n\n###### Type: **String** (e.g. 300px, 20vh) | Default: **undefined**\n\nIf it's set the plugin will use height as fixed value and change only according device pixel ratio.\n\n### params\n\n###### Type: **String** | Default: **undefined** | _optional_\n\nYou can apply any Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...\nMultiple params can be applied, separated by \"```&```\" e.g. **wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1**\n\n```javascript\nparams=\"gray=1&bright=10\"\n```\n\n#### alternative syntax: type: **Object**\n\n```javascript\nparams={{\n bright: 10,\n grey: 1,\n ...\n}}\n```\n\n### doNotReplaceURL\n\n###### Type: **Boolean** | Default: **false** | _optional_\n\nIf set to true, the plugin will only add query parameters to the provided image source URL.\n\n[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)\n\n### sizes\n\n###### Type: **Object** | Default: **undefined**\n\n**{preset breakpoint (xs,sm, md,lg,xl) or media query + ' ' + image params}**:\n\n```jsx\n