import type { CSSProperties, HTMLAttributes, ImgHTMLAttributes } from "react"; import type { Node } from "gatsby"; import type { PlaceholderProps } from "./placeholder"; import type { MainImageProps } from "./main-image"; import type { IGatsbyImageData } from "./gatsby-image.browser"; import type { Layout, ImageFormat } from "../image-utils"; export declare const hasNativeLazyLoadSupport: () => boolean; export declare function gatsbyImageIsInstalled(): boolean; export type IGatsbyImageDataParent = T & { gatsbyImageData: IGatsbyImageData; }; export type IGatsbyImageParent = T & { gatsbyImage: IGatsbyImageData; }; export type FileNode = Partial & { childImageSharp?: IGatsbyImageDataParent>; }; export type ImageDataLike = FileNode | IGatsbyImageDataParent | IGatsbyImageParent | IGatsbyImageData; export declare const getImage: (node: ImageDataLike | null) => IGatsbyImageData | undefined; export declare const getSrc: (node: ImageDataLike) => string | undefined; export declare const getSrcSet: (node: ImageDataLike) => string | undefined; export declare function getWrapperProps(width: number, height: number, layout: Layout): Pick, "className" | "style"> & { "data-gatsby-image-wrapper": string; }; export interface IUrlBuilderArgs { width: number; height: number; baseUrl: string; format: ImageFormat; options: OptionsType; } export interface IGetImageDataArgs> { baseUrl: string; /** * For constrained and fixed images, the size of the image element */ width?: number; height?: number; /** * If available, pass the source image width and height */ sourceWidth?: number; sourceHeight?: number; /** * If only one dimension is passed, then this will be used to calculate the other. */ aspectRatio?: number; layout?: Layout; /** * Returns a URL based on the passed arguments. Should be a pure function */ urlBuilder: (args: IUrlBuilderArgs) => string; /** * Should be a data URI */ placeholderURL?: string; backgroundColor?: string; /** * Used in error messages etc */ pluginName?: string; /** * If you do not support auto-format, pass an array of image types here */ formats?: Array; breakpoints?: Array; /** * Passed to the urlBuilder function */ options?: OptionsType; } /** * Use this hook to generate gatsby-plugin-image data in the browser. */ export declare function getImageData({ baseUrl, urlBuilder, sourceWidth, sourceHeight, pluginName, formats, breakpoints, options, ...props }: IGetImageDataArgs): IGatsbyImageData; export declare function getMainProps(isLoading: boolean, isLoaded: boolean, images: IGatsbyImageData["images"], loading?: "eager" | "lazy", style?: CSSProperties): Partial; export type PlaceholderImageAttrs = ImgHTMLAttributes & Pick & { "data-placeholder-image"?: string; }; export declare function getPlaceholderProps(placeholder: PlaceholderImageAttrs | undefined, isLoaded: boolean, layout: Layout, width?: number, height?: number, backgroundColor?: string, objectFit?: CSSProperties["objectFit"], objectPosition?: CSSProperties["objectPosition"]): PlaceholderImageAttrs; export interface IArtDirectedImage { media: string; image: IGatsbyImageData; } /** * Generate a Gatsby image data object with multiple, art-directed images that display at different * resolutions. * * @param defaultImage The image displayed when no media query matches. * It is also used for all other settings applied to the image, such as width, height and layout. * You should pass a className to the component with media queries to adjust the size of the container, * as this cannot be adjusted automatically. * @param artDirected Array of objects which each contains a `media` string which is a media query * such as `(min-width: 320px)`, and the image object to use when that query matches. */ export declare function withArtDirection(defaultImage: IGatsbyImageData, artDirected: Array): IGatsbyImageData; //# sourceMappingURL=hooks.d.ts.map