react-zoom-image-hover/dist/esm/components/Zoom.js

This package is for zooming image on hover

import { jsx as _jsx } from "react/jsx-runtime";
import { useRef, useState } from 'react';
const Zoom = ({ className, zoomScale, height, width, style, src, transitionTime = 0.1 }) => {
    const ref = useRef(null);
    const [zoom, setZoom] = useState(false);
    const [mouseX, setMouseX] = useState(0);
    const [mouseY, setMouseY] = useState(0);
    const handleMouseOver = () => {
        setZoom(true);
    };
    const handleMouseOut = () => {
        setZoom(false);
    };
    const handleMouseMovement = (e) => {
        if (ref.current) {
            const { left: offsetLeft, top: offsetTop } = ref.current.getBoundingClientRect();
            const x = ((e.pageX - offsetLeft - window.scrollX) / ref.current.offsetWidth) * 100;
            const y = ((e.pageY - offsetTop - window.scrollY) / ref.current.offsetHeight) * 100;
            setMouseX(x);
            setMouseY(y);
        }
    };
    const transform = {
        transformOrigin: `${mouseX}% ${mouseY}%`,
    };
    const innerDivStyle = {
        height: '100%',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'contain',
        transition: `transform ${transitionTime}s ease-out`,
        backgroundImage: `url('${src}')`,
    };
    return (_jsx("div", { className: className, style: Object.assign(Object.assign({}, style), { height,
            width, overflow: 'hidden' }), onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, onMouseMove: handleMouseMovement, ref: ref, children: _jsx("div", { style: Object.assign(Object.assign(Object.assign({}, transform), innerDivStyle), { transform: zoom ? `scale(${zoomScale})` : 'scale(1.0)' }), className: className }) }));
};
export default Zoom;
//# sourceMappingURL=Zoom.js.map