@pixel-puppy/react/dist/Image.d.ts

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

import { type ImgHTMLAttributes } from 'react';
export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
    /**
     * Custom device width breakpoints for responsive images.
     * @default [480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
     * @example
     * deviceBreakpoints={[400, 800, 1200, 1600]}
     */
    deviceBreakpoints?: number[];
    /**
     * The desired image format. Defaults to 'webp'
     */
    format?: 'webp' | 'png';
    /**
     * Custom image width breakpoints for small images and icons.
     * @default [16, 32, 48, 64, 96, 128, 256, 384]
     * @example
     * imageBreakpoints={[24, 48, 96]}
     */
    imageBreakpoints?: number[];
    /**
     * The project identifier for your Pixel Puppy account
     */
    project: string;
    /**
     * Whether to generate responsive image attributes (srcset, sizes).
     * When false, returns only a single src URL.
     * @default true
     */
    responsive?: boolean;
    /**
     * The sizes attribute for responsive images. Describes the image's display size
     * across different viewport widths. When provided, uses sizes-based srcset strategy.
     * If not provided, uses default responsive behavior.
     *
     * @example
     * sizes="(min-width: 768px) 50vw, 100vw"
     */
    sizes?: string;
    /**
     * The URL of the original image to transform
     */
    src: string;
    /**
     * The desired width of the image in pixels.
     * When provided without sizes, generates srcset with all common breakpoints + width + 2x.
     * When provided with sizes, includes width in the srcset entries.
     */
    width?: number;
}
/**
 * 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}
 * />
 * ```
 */
export declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
//# sourceMappingURL=Image.d.ts.map