type NativeImageProps = React.ImgHTMLAttributes;
interface UseImageProps {
/**
* The image `src` attribute
*/
src?: string;
/**
* The image `srcset` attribute
*/
srcSet?: string;
/**
* The image `sizes` attribute
*/
sizes?: string;
/**
* A callback for when the image `src` has been loaded
*/
onLoad?: NativeImageProps["onLoad"];
/**
* A callback for when there was an error loading the image `src`
*/
onError?: NativeImageProps["onError"];
/**
* If `true`, opt out of the `fallbackSrc` logic and use as `img`
*
* @default false
*/
ignoreFallback?: boolean;
/**
* The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.
* This tells the browser to request cross-origin access when trying to download the image data.
*/
crossOrigin?: NativeImageProps["crossOrigin"];
loading?: NativeImageProps["loading"];
}
type Status = "loading" | "failed" | "pending" | "loaded";
type FallbackStrategy = "onError" | "beforeLoadOrError";
/**
* React hook that loads an image in the browser,
* and lets us know the `status` so we can show image
* fallback if it is still `pending`
*
* @returns the status of the image loading progress
*
* @example
*
* ```jsx
* function App(){
* const status = useImage({ src: "image.png" })
* return status === "loaded" ?
:
* }
* ```
*/
declare function useImage(props: UseImageProps): Status;
declare const shouldShowFallbackImage: (status: Status, fallbackStrategy: FallbackStrategy) => boolean;
type UseImageReturn = ReturnType;
export { FallbackStrategy, UseImageProps, UseImageReturn, shouldShowFallbackImage, useImage };