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

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

import { getResponsiveImageAttributes } from "@pixel-puppy/javascript";
import { forwardRef } from "react";
import { jsx } from "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 = forwardRef(({ project, src, width, format, sizes, responsive, deviceBreakpoints, imageBreakpoints, ...imgProps }, ref) => {
	const attrs = getResponsiveImageAttributes(project, src, {
		width,
		format,
		sizes,
		responsive,
		deviceBreakpoints,
		imageBreakpoints
	});
	return /* @__PURE__ */ 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
export { Image };