@pixel-puppy/react/dist/index.cjs

Official React library for Pixel Puppy - Transform and optimize images with WebP conversion and smart resizing

let __pixel_puppy_javascript = require("@pixel-puppy/javascript");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");

//#region src/Image.tsx
/**
* A React component for optimized image loading using Pixel Puppy.
*
* @example
* ```tsx
* <Image
*   alt="A beautiful photo"
*   project="my-project"
*   src="https://example.com/photo.jpg"
* />
* ```
*
* @example
* ```tsx
* <Image
*   alt="A beautiful photo"
*   className="rounded-lg shadow-md"
*   format="png"
*   project="my-project"
*   src="https://example.com/photo.jpg"
*   width={800}
* />
* ```
*/
const Image = (0, react.forwardRef)(({ project, src, width, format, sizes, responsive, deviceBreakpoints, imageBreakpoints, ...imgProps }, ref) => {
	const attrs = (0, __pixel_puppy_javascript.getResponsiveImageAttributes)(project, src, {
		width,
		format,
		sizes,
		responsive,
		deviceBreakpoints,
		imageBreakpoints
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
		alt: imgProps.alt || "",
		decoding: "async",
		loading: "lazy",
		...imgProps,
		width: attrs.width ?? void 0,
		ref,
		src: attrs.src,
		srcSet: attrs.srcSet,
		sizes: attrs.sizes
	});
});
Image.displayName = "Image";

//#endregion
exports.Image = Image;