| 1 | /// <reference types="next" />
|
| 2 | import { ImgHTMLAttributes } from "react";
|
| 3 | declare type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
|
| 4 | export interface UseImageProps {
|
| 5 | /**
|
| 6 | * The image `src` attribute
|
| 7 | */
|
| 8 | src?: string;
|
| 9 | /**
|
| 10 | * The image `srcset` attribute
|
| 11 | */
|
| 12 | srcSet?: string;
|
| 13 | /**
|
| 14 | * The image `sizes` attribute
|
| 15 | */
|
| 16 | sizes?: string;
|
| 17 | /**
|
| 18 | * A callback for when the image `src` has been loaded
|
| 19 | */
|
| 20 | onLoad?: NativeImageProps["onLoad"];
|
| 21 | /**
|
| 22 | * A callback for when there was an error loading the image `src`
|
| 23 | */
|
| 24 | onError?: NativeImageProps["onError"];
|
| 25 | /**
|
| 26 | * If `true`, opt out of the `fallbackSrc` logic and use as `img`
|
| 27 | */
|
| 28 | ignoreFallback?: boolean;
|
| 29 | /**
|
| 30 | * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.
|
| 31 | * This tells the browser to request cross-origin access when trying to download the image data.
|
| 32 | */
|
| 33 | crossOrigin?: NativeImageProps["crossOrigin"];
|
| 34 | loading?: NativeImageProps["loading"];
|
| 35 | }
|
| 36 | declare type Status = "loading" | "failed" | "pending" | "loaded";
|
| 37 | /**
|
| 38 | * React hook that loads an image in the browser,
|
| 39 | * and let's us know the `status` so we can show image
|
| 40 | * fallback if it is still `pending`
|
| 41 | *
|
| 42 | * @returns the status of the image loading progress
|
| 43 | *
|
| 44 | * @example
|
| 45 | *
|
| 46 | * ```jsx
|
| 47 | * function App(){
|
| 48 | * const status = useImage({ src: "image.png" })
|
| 49 | * return status === "loaded" ? <img src="image.png" /> : <Placeholder />
|
| 50 | * }
|
| 51 | * ```
|
| 52 | */
|
| 53 | export declare function useImage(props: UseImageProps): Status;
|
| 54 | export declare type UseImageReturn = ReturnType<typeof useImage>;
|
| 55 | export {};
|