@sarthak61199/react-smart-image/dist/index.d.ts

Smart, responsive React image component with BlurHash/LQIP placeholders and CDN-friendly srcset/sizes.

import React, { ImgHTMLAttributes } from 'react';

type Breakpoints = Record<string, number | string>;
type BaseImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> & {
    src: string;
    alt: string;
    width?: number;
    height?: number;
    breakpoints?: Breakpoints;
    priority?: boolean;
    transformUrl?: (src: string, width?: number) => string;
    deferUntilInView?: boolean;
};
type BlurhashPlaceholderProps = BaseImageProps & {
    placeholder: "blurhash";
    blurhash: string;
};
type LqipPlaceholderProps = BaseImageProps & {
    placeholder: "lqip";
    blurhash?: never;
};
type NonePlaceholderProps = BaseImageProps & {
    placeholder?: "none" | undefined;
    blurhash?: never;
};
type ImageProps = BlurhashPlaceholderProps | LqipPlaceholderProps | NonePlaceholderProps;

declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;

type UseInViewOptions = IntersectionObserverInit & {
    once?: boolean;
};
declare function useInView<T extends Element = Element>(options?: UseInViewOptions): [(node: T | null) => void, boolean];

export { type Breakpoints, Image, type ImageProps, useInView };