utility to generate breakpoints with cloudinary

getResponsiveAttributes.js

import { generateImageResponsiveAttributes } from "cloudinary/lib/utils/srcsetUtils";

const CLOUD = "__cloud name__";

const BREAK_POINTS = 4;

export const getResponsiveAttributes = (id, min, max, transformation) => {
	const sizes = new Array(BREAK_POINTS)
		.fill(null)
		.map((n, i) => `(max-width: ${min * (i + 1)}px) ${(min * (i + 1)) / 2}px`);

	const srcset = generateImageResponsiveAttributes(id, {}, {		
		min_width: min,
		max_width: max,
		max_images: BREAK_POINTS,
		transformation: { transformation },
	}, {
		cloud_name: CLOUD,
	});

	return {
		...srcset,
		sizes,
	};
};

Image.js

import {getResponsiveAttributes} from "../getResponsiveAttributes";

const Image = ({publidId}) =>  {

	const transformation = [{
			quality: "auto",
			fetchFormat: "auto",
			dpr: 2,
		},];
	
	const respAttrs = getResponsiveAttributes(
		publicId,
		400,
		1000,
		transformation);

	const url = cloudinary.url(publicId, { transformation });

	return (
		<img src={url}
		     alt={publicId}
		     srcSet={respAttrs.srcset}
		     sizes={respAttrs.sizes}/>
	);
};