@shopify/hydrogen-react/dist/types/Image.d.ts

React components, hooks, and utilities for creating custom Shopify storefronts

import * as React from 'react';
import type { Image as ImageType } from './storefront-api-types.js';
import type { PartialDeep, Simplify } from 'type-fest';
declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
export declare type ShopifyLoaderOptions = {
    crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
    scale?: 2 | 3;
    width?: HtmlImageProps['width'] | ImageType['width'];
    height?: HtmlImageProps['height'] | ImageType['height'];
};
export declare type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
    src: ImageType['url'];
}>;
export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
    /** An object with fields that correspond to the Storefront API's
     * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
     * The `data` prop is required.
     */
    data: PartialDeep<ImageType, {
        recurseIntoArrays: true;
    }>;
    /** A custom function that generates the image URL. Parameters passed in
     * are `ShopifyLoaderParams`
     */
    loader?: (params: ShopifyLoaderParams) => string;
    /** An object of `loader` function options. For example, if the `loader` function
     * requires a `scale` option, then the value can be a property of the
     * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.
     */
    loaderOptions?: ShopifyLoaderOptions;
    /**
     * `src` isn't used, and should instead be passed as part of the `data` object
     */
    src?: never;
    /**
     * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.
     */
    widths?: (HtmlImageProps['width'] | ImageType['width'])[];
};
/**
 * The `Image` component renders an image for the Storefront API's
 * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
 *
 * An image's width and height are determined using the following priority list:
 * 1. The width and height values for the `loaderOptions` prop
 * 2. The width and height values for bare props
 * 3. The width and height values for the `data` prop
 *
 * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,
 * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing
 * value will remain as `null`
 */
export declare function Image({ data, width, height, loading, loader, loaderOptions, widths, decoding, ...rest }: ShopifyImageProps): JSX.Element | null;
export {};