easy-magnify/dist/index.d.mts

Everything you need for magnifying images

import * as React from 'react';
import React__default, { HTMLAttributes } from 'react';

type EasyZoomOnHoverProps = {
    /**
     * Delay timer in ms for knowingly applying delay on loader and enhancing user experience
     * @default 1600
     */
    delayTimer?: number;
    /**
     * The distance between main image and zoomed Image in pixels.
     * @default 10
     */
    distance?: number;
    /**
     * The loading indicator to show when the image is loading. Provides extra user experience.
     * default: EasySkeleton with height={500} and width={500}
     */
    loadingIndicator?: React__default.ReactNode;
    mainImage: {
        width?: number;
        height?: number;
        src: string;
        alt?: string;
    };
    zoomImage: {
        src: string;
        alt?: string;
    };
    zoomContainerWidth?: number;
    zoomContainerHeight?: number;
    zoomLensScale?: number;
};
type ImageDimensionType = {
    height: number;
    width: number;
};
declare const EasyZoomOnHover: React__default.ForwardRefExoticComponent<EasyZoomOnHoverProps & React__default.RefAttributes<HTMLDivElement>>;

type EasyZoomOnMovePropsType = {
    /**
     * Delay timer in ms for knowingly applying delay on loader and enhancing user experience
     * @default 1600
    */
    delayTimer?: number;
    loadingIndicator?: React__default.ReactNode;
    mainImage: {
        width?: number;
        height?: number;
        src: string;
        alt?: string;
    };
    zoomImage: {
        src: string;
        alt?: string;
    };
};
declare const EasyZoomOnMove: (props: EasyZoomOnMovePropsType) => React__default.JSX.Element;

/**
 * This hook is used for tracking mouse position. Note: this is to be tested and not recommended as of 1.1.0
 *  for use as it re-renders  whole component on change of cursor position. It is to be optimized.
 */
declare function useMouse<T extends HTMLElement = any>(options?: {
    resetOnExit?: boolean;
}): {
    x: number;
    y: number;
    ref: React.RefObject<T>;
};

interface SkeletonPropsType extends HTMLAttributes<HTMLDivElement> {
    height: number;
    width: number;
    /**
     * Animation of the skeleton. Default is "pulse 2s ease-in-out 0.5s infinite"
     */
    animation?: string;
    /**
     * Background color of the skeleton. Default is #0000001c
     */
    backgroundColor?: string;
}
declare const EasySkeleton: (props: SkeletonPropsType) => React__default.JSX.Element;

type StoreListener<TState> = (arg: {
    state: TState;
    updatedProperties: Partial<TState>;
}) => void;
declare function createStore<TState>(initialState: TState): {
    subscribe: (listener: StoreListener<TState>) => () => void;
    cleanup: () => void;
    getState: () => TState;
    setState: (extraState?: Partial<TState>) => void;
    batch: (cb: () => void) => void;
};

declare function clamp(value: number, min: number, max: number): number;
declare function noop(): void;
declare function disableScroll(): void;
declare function enableScroll(): void;
declare function getSourceImage(container: HTMLElement): HTMLImageElement;
type PointerPosition = {
    x: number;
    y: number;
};
declare function getPointersCenter(first: PointerPosition, second: PointerPosition): {
    x: number;
    y: number;
};
declare function computeZoomGesture(prev: [PointerPosition, PointerPosition], curr: [PointerPosition, PointerPosition]): {
    scale: number;
    center: {
        x: number;
        y: number;
    };
};
declare function makeMaybeCallFunction<T>(predicateFn: () => boolean, fn: (arg: T) => void): (arg: T) => void;
declare const scaleLinear: ({ domainStart, domainStop, rangeStart, rangeStop, }: {
    domainStart: number;
    domainStop: number;
    rangeStart: number;
    rangeStop: number;
}) => (value: number) => number;

type ZoomedImgStatus$1 = "idle" | "loading" | "loaded" | "error";
type ZoomImageHoverOptions = {
    customZoom: {
        width: number;
        height: number;
    };
    zoomImageSource?: string;
    zoomLensClass?: string;
    zoomLensScale?: number;
    zoomTarget: HTMLElement;
    zoomTargetClass?: string;
    scale?: number;
    disableScrollLock?: boolean;
    zoomImageProps?: {
        alt?: string;
    };
};
type ZoomImageHoverState = {
    zoomedImgStatus: ZoomedImgStatus$1;
    enabled: boolean;
};
type ZoomImageHoverStateUpdate = {
    enabled: boolean;
};
declare function createZoomImageHover(container: HTMLElement, options: ZoomImageHoverOptions): {
    cleanup: () => void;
    subscribe: (listener: StoreListener<ZoomImageHoverState>) => () => void;
    getState: () => ZoomImageHoverState;
    setState: (newState: ZoomImageHoverStateUpdate) => void;
};

type CropImageArg = {
    currentZoom: number;
    image: HTMLImageElement;
    positionX: number;
    positionY: number;
    rotation?: number;
};
declare const cropImage: ({ image, positionX, positionY, currentZoom, rotation }: CropImageArg) => Promise<string>;

type ZoomedImgStatus = "idle" | "loading" | "loaded" | "error";
type ZoomImageMoveOptions = {
    zoomFactor?: number;
    zoomImageSource?: string;
    disableScrollLock?: boolean;
    zoomImageProps?: {
        alt?: string;
    };
};
type ZoomImageMoveState = {
    zoomedImgStatus: ZoomedImgStatus;
};
declare function createZoomImageMove(container: HTMLElement, options?: ZoomImageMoveOptions): {
    cleanup: () => void;
    subscribe: (listener: StoreListener<ZoomImageMoveState>) => () => void;
    getState: () => ZoomImageMoveState;
};

declare const makeImageLoader: () => {
    createZoomImage: (img: HTMLImageElement, src: string, store: ReturnType<typeof createStore<{
        zoomedImgStatus: ZoomedImgStatus;
    }>>) => void;
};
declare const imageLoader: {
    createZoomImage: (img: HTMLImageElement, src: string, store: ReturnType<typeof createStore<{
        zoomedImgStatus: ZoomedImgStatus;
    }>>) => void;
};

export { type CropImageArg, EasySkeleton, EasyZoomOnHover, type EasyZoomOnHoverProps, EasyZoomOnMove, type ImageDimensionType, type PointerPosition, type StoreListener, type ZoomImageHoverOptions, type ZoomImageHoverState, type ZoomImageHoverStateUpdate, type ZoomImageMoveOptions, type ZoomImageMoveState, type ZoomedImgStatus, clamp, computeZoomGesture, createStore, createZoomImageHover, createZoomImageMove, cropImage, disableScroll, enableScroll, getPointersCenter, getSourceImage, imageLoader, makeImageLoader, makeMaybeCallFunction, noop, scaleLinear, useMouse };