@trail-ui/react
Version:
47 lines (44 loc) • 1.45 kB
TypeScript
import * as react from 'react';
import { ImgHTMLAttributes } from 'react';
import { ImageVariantProps, SlotsToClasses, ImageSlots } from '@trail-ui/theme';
type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
interface ImageProps extends ImgHTMLAttributes<HTMLImageElement>, ImageVariantProps {
as?: React.ElementType;
/**
* Controlled loading state.
*/
isLoading?: boolean;
/**
* A fallback image.
*/
fallbackSrc?: React.ReactNode;
/**
* Whether to disable the loading skeleton.
* @default false
*/
disableSkeleton?: boolean;
/**
* A callback for when the image `src` has been loaded
*/
onLoad?: NativeImageProps['onLoad'];
/**
* Function called when image failed to load
*/
onError?: () => void;
/**
* A loading strategy to use for the image.
*/
loading?: NativeImageProps['loading'];
/**
* Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element.
* If you set this prop as `true` neither the skeleton nor the zoom effect will work.
* @default false
*/
removeWrapper?: boolean;
/**
* Classes object to style the image.
*/
classNames?: SlotsToClasses<ImageSlots>;
}
declare const _Image: react.ForwardRefExoticComponent<ImageProps & react.RefAttributes<HTMLDivElement>>;
export { _Image as Image, ImageProps };