soda-material
Version:
A React(>=18) component library that may follow [Material Design 3](https://m3.material.io/components) (a.k.a. Material You)
59 lines (58 loc) • 2.38 kB
TypeScript
/// <reference types="react" />
/**
* A high-level image component, supports loading progress (when `crossOrigin` is specified),
* timeout with default reload button, lazy load, and so on.
* When use this component, explicit set the width and height (or min-height/min-width) is recommended,
* otherwise the loading placeholder cannot be rendered as width and height is zero by default.
*/
export declare const SodaImage: import("react").ForwardRefExoticComponent<{
src?: string | undefined;
/**
* This prevent the image to load until the image get into the viewport
*/
lazy?: boolean | undefined;
/**
* Timeout in ms, default 10,000
*/
timeout?: number | undefined;
/**
* Placeholder when the image is loading, by default use `<CircularProgressIndicator/>`
*/
placeholder?: React.ReactNode;
/**
* Description string
*/
description?: React.ReactNode;
/**
* Customize behavior
*/
customize?: ((state: 'lazy' | 'loading' | 'error' | 'loaded') => React.ReactNode | undefined) | undefined;
/**
* Adjust the image's object-fit
*/
objectFit?: React.CSSProperties['objectFit'];
/**
* Adjust the image's aspect-ratio
*/
aspectRatio?: React.CSSProperties['aspectRatio'];
/**
* Alt attribute for the image itself
*/
alt?: string | undefined;
/**
* Send CORS request to fetch the image, this allow us to known how much we have downloaded
* so we can display a concrete value in the placeholder of `<CircularProgressIndicator/>`
*/
crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
referrerPolicy?: React.ImgHTMLAttributes<HTMLImageElement>['referrerPolicy'];
/**
* Cache property for fetch, works when `crossOrigin` is specified
*/
cache?: RequestCache | undefined;
width?: string | number | undefined;
height?: string | number | undefined;
minWidth?: string | number | undefined;
minHeight?: string | number | undefined;
} & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "ref" | "alt" | "crossOrigin" | "height" | "placeholder" | "src" | "width" | "aspectRatio" | "minHeight" | "minWidth" | "objectFit" | "lazy" | "referrerPolicy" | "timeout" | "description" | "customize" | "cache"> & import("react").RefAttributes<{
reload(): void;
}>>;