Not Working

[MuhammadNasir-dev]

In React Version 19 or later it now work

[rasouljabbari]

import React, { useEffect, useRef, useState } from "react";

type EasyMagnifyProps = {
    src: string;
    alt?: string;
    zoom?: number; // zoom level (e.g., 2 = 200%)
    lensSize?: number; // pixels (square)
    className?: string;
    zoomPanePosition?: "right" | "left"; // zoom pane position
    touchToggle?: boolean; // enable touch toggle on mobile
    zoomPaneSize?: number; // ✅ custom zoom pane size (optional)
};

export default function EasyMagnify({
    src,
    alt = "",
    zoom = 2,
    lensSize = 140,
    className = "",
    zoomPanePosition = "right",
    touchToggle = true,
    zoomPaneSize,
}: EasyMagnifyProps) {
    const containerRef = useRef<HTMLDivElement | null>(null);
    const imgRef = useRef<HTMLImageElement | null>(null);
    const [visible, setVisible] = useState(false);
    const [lensPos, setLensPos] = useState({ x: 0, y: 0 });
    const [imgSize, setImgSize] = useState({ w: 0, h: 0 });
    const [isTouchZoom, setIsTouchZoom] = useState(false);

    useEffect(() => {
        const img = imgRef.current;
        if (!img) return;

        function update() {
            if (img) {
                setImgSize({ w: img.width, h: img.height });
            }
        }

        if (img.complete) update();
        img.addEventListener("load", update);
        window.addEventListener("resize", update);
        return () => {
            img.removeEventListener("load", update);
            window.removeEventListener("resize", update);
        };
    }, [src]);

    function getRelativePosition(e: React.MouseEvent | React.Touch) {
        const container = containerRef.current;
        const img = imgRef.current;
        if (!container || !img) return { x: 0, y: 0 };

        const rect = img.getBoundingClientRect();
        let clientX = 0;
        let clientY = 0;

        if ((e as React.MouseEvent).clientX !== undefined) {
            const me = e as React.MouseEvent;
            clientX = me.clientX;
            clientY = me.clientY;
        } else {
            const te = e as any;
            const touch = te.touches?.[0] ?? te[0];
            clientX = touch?.clientX ?? 0;
            clientY = touch?.clientY ?? 0;
        }

        let x = clientX - rect.left;
        let y = clientY - rect.top;

        x = Math.max(0, Math.min(rect.width, x));
        y = Math.max(0, Math.min(rect.height, y));

        return { x, y };
    }

    function handleMove(e: React.MouseEvent) {
        setLensPos(getRelativePosition(e));
    }

    function handleEnter() {
        setVisible(true);
    }

    function handleLeave() {
        setVisible(false);
        if (isTouchZoom) setIsTouchZoom(false);
    }

    function handleTouchStart(e: React.TouchEvent) {
        if (!touchToggle) return;
        if (!isTouchZoom) {
            setIsTouchZoom(true);
            setVisible(true);
            const pos = getRelativePosition(e.nativeEvent as unknown as React.Touch);
            setLensPos(pos);
        } else {
            setIsTouchZoom(false);
            setVisible(false);
        }
    }

    function handleTouchMove(e: React.TouchEvent) {
        if (!isTouchZoom) return;
        const pos = getRelativePosition(e.nativeEvent as unknown as React.Touch);
        setLensPos(pos);
    }

    const bgPos = (() => {
        const { w, h } = imgSize;
        if (w === 0 || h === 0) return "0% 0%";
        const xPercent = (lensPos.x / w) * 100;
        const yPercent = (lensPos.y / h) * 100;
        return `${xPercent}% ${yPercent}%`;
    })();

    const lensHalf = lensSize / 2;
    const lensStyle: React.CSSProperties = {
        width: lensSize,
        height: lensSize,
        left: Math.max(0, lensPos.x - lensHalf),
        top: Math.max(0, lensPos.y - lensHalf),
        display: visible ? "block" : "none",
    };

    const paneWidth = zoomPaneSize ?? imgSize.w;
    const paneHeight = zoomPaneSize ?? imgSize.h;

    const zoomStyle: React.CSSProperties = {
        width: paneWidth,
        height: paneHeight,
        backgroundImage: `url(${src})`,
        backgroundRepeat: "no-repeat",
        backgroundSize: `${imgSize.w * zoom}px ${imgSize.h * zoom}px`,
        backgroundPosition: bgPos,
        display: visible ? "block" : "none",
    };

    const isLeft = zoomPanePosition === "left";

    return (
        <div className={`flex items-start gap-3 ${className}`}>
            {!isLeft && (
                <div
                    ref={containerRef}
                    className="relative select-none"
                    onMouseMove={handleMove}
                    onMouseEnter={handleEnter}
                    onMouseLeave={handleLeave}
                    onTouchStart={handleTouchStart}
                    onTouchMove={handleTouchMove}
                    onTouchEnd={handleLeave}
                    style={{ touchAction: "none" }}
                >
                    <img
                        ref={imgRef}
                        src={src}
                        alt={alt}
                        className="block max-w-full h-auto"
                        draggable={false}
                        onDragStart={(e) => e.preventDefault()}
                    />
                    <div
                        className="pointer-events-none absolute rounded-full border-2 border-white shadow-lg bg-transparent"
                        style={lensStyle}
                    />
                </div>
            )}

            <div
                aria-hidden={!visible}
                className="overflow-hidden rounded-lg border border-slate-200 shadow-sm relative flex-shrink-0"
                style={zoomStyle}
            />

            {isLeft && (
                <div
                    ref={containerRef}
                    className="relative select-none"
                    onMouseMove={handleMove}
                    onMouseEnter={handleEnter}
                    onMouseLeave={handleLeave}
                    onTouchStart={handleTouchStart}
                    onTouchMove={handleTouchMove}
                    onTouchEnd={handleLeave}
                    style={{ touchAction: "none" }}
                >
                    <img
                        ref={imgRef}
                        src={src}
                        alt={alt}
                        className="block max-w-full h-auto"
                        draggable={false}
                        onDragStart={(e) => e.preventDefault()}
                    />
                    <div
                        className="pointer-events-none absolute rounded-full border-2 border-white shadow-lg bg-transparent"
                        style={lensStyle}
                    />
                </div>
            )}
        </div>
    );
}