react-zoom-image-hover/dist/esm/components/Zoom.d.ts

This package is for zooming image on hover

import { FC, CSSProperties } from 'react';
export interface ZoomProps {
    /** Image source URL */
    src: string;
    /** Container height (CSS value: string or number) */
    height: string | number;
    /** Container width (CSS value: string or number) */
    width: string | number;
    /** Additional CSS class name for the container */
    className?: string;
    /** Additional CSS class name for the inner image element */
    innerClassName?: string;
    /** Transition duration in seconds */
    transitionTime?: number;
    /** Zoom scale multiplier (default: 1.5) */
    zoomScale?: number;
    /** Additional inline styles for the container */
    style?: CSSProperties;
    /** Alt text for accessibility (recommended) */
    alt?: string;
    /** Object fit CSS value - how the image should be resized (default: 'contain') */
    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
    /** Object position CSS value - position of the image (default: 'center') */
    objectPosition?: string;
    /** Enable touch support for mobile devices */
    enableTouch?: boolean;
    /** Throttle delay for mouse movement in milliseconds (default: 16 for ~60fps) */
    throttleDelay?: number;
    /** Custom easing function for transitions */
    transitionTimingFunction?: string;
}
/**
 * Zoom component that provides image zoom on hover with smooth transitions
 * and customizable zoom behavior.
 *
 * @example
 * ```tsx
 * <Zoom
 *   src="/path/to/image.jpg"
 *   width={400}
 *   height={300}
 *   zoomScale={2}
 *   alt="Product image"
 * />
 * ```
 */
declare const Zoom: FC<ZoomProps>;
export default Zoom;