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