point-focus/dist/index.d.ts

A React component for zooming and focusing on image points via click, drag, or cursor.

import * as react_jsx_runtime from 'react/jsx-runtime';

type ImageSource = React.SourceHTMLAttributes<HTMLSourceElement>;
type IInteractionTYpe = 'click' | 'hover' | 'keyboard' | 'external';
interface IImageMagnifierTypes {
    src: string;
    sources?: ImageSource[];
    width?: number | undefined;
    height?: number | undefined;
    zoomSrc?: string | undefined;
    zoomScale?: number | undefined;
    zoomPreload?: boolean | undefined;
    fadeDuration?: number | undefined;
    moveType?: 'follow' | 'drag' | 'pinch';
    zoomType?: 'click' | 'hover';
    externalZoomState?: boolean | undefined;
    setExternalZoomState?: (value: boolean) => void | undefined;
    clickToZoomOut?: boolean | undefined;
    containerClassName?: string | undefined;
    baseImageClassName?: string | undefined;
    zoomImageClassName?: string | undefined;
    closeButtonClassName?: string | undefined;
    alt: string;
    containerAriaLabel?: string;
    closeButtonAriaLabel?: string;
    zoomImageAriaLabel?: string;
    tabIndex?: number;
    hideCloseButton?: boolean | undefined;
    closeButtonContent?: React.ReactNode | undefined;
    overlay?: React.ReactNode | undefined;
    baseImageStyle?: React.CSSProperties | undefined;
    onMouseEnter?: (info: {
        source: 'mouse' | 'touch';
    }) => void;
    onMouseLeave?: (info: {
        source: 'mouse' | 'touch';
    }) => void;
    onClickImage?: (info: {
        x: number;
        y: number;
        source: 'mouse' | 'touch';
    }) => void;
    onZoom?: (info: {
        at: {
            x: number;
            y: number;
        };
        method: IInteractionTYpe;
    }) => void;
    onClose?: (info: {
        triggeredBy: IInteractionTYpe;
    }) => void;
    afterZoomImgLoaded?: () => void;
    afterZoomOut?: () => void;
    onBaseImageError?: () => void;
    onZoomImageError?: () => void;
    onDragStart?: (info: {
        start: {
            x: number;
            y: number;
        };
        source: 'mouse' | 'touch';
    }) => void;
    onDragEnd?: (info: {
        velocity: {
            vx: number;
            vy: number;
        };
        final: {
            x: number;
            y: number;
        };
    }) => void;
    onZoomedMouseMove?: (info: {
        x: number;
        y: number;
        bounds: DOMRect;
    }) => void;
    disableMobile?: boolean;
    disableDrag?: boolean;
    disableInertia?: boolean;
    loadingPlaceholder?: React.ReactNode;
    disableLoadingFallbacks?: boolean;
    errorPlaceholder?: React.ReactNode;
    disableErrorFallbacks?: boolean;
}

declare const ImageMagnifier: ({ src, sources, width, height, zoomSrc, zoomScale, zoomPreload, fadeDuration, moveType, zoomType, baseImageStyle, hideCloseButton, containerClassName, baseImageClassName, zoomImageClassName, closeButtonClassName, onMouseEnter, onZoomedMouseMove, onMouseLeave, onClickImage, onZoom, onClose, afterZoomImgLoaded, afterZoomOut, onBaseImageError, onZoomImageError, onDragStart, onDragEnd, alt, containerAriaLabel, closeButtonAriaLabel, zoomImageAriaLabel, tabIndex, closeButtonContent, overlay, disableDrag, disableInertia, loadingPlaceholder, errorPlaceholder, clickToZoomOut, externalZoomState, setExternalZoomState, disableMobile, disableLoadingFallbacks, disableErrorFallbacks, }: IImageMagnifierTypes) => react_jsx_runtime.JSX.Element;

export { ImageMagnifier as default };