react-zoom-image-hover
Version:
This package is for zooming image on hover
40 lines • 1.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Zoom = ({ className, zoomScale, height, width, style, src, transitionTime = 0.1 }) => {
const ref = (0, react_1.useRef)(null);
const [zoom, setZoom] = (0, react_1.useState)(false);
const [mouseX, setMouseX] = (0, react_1.useState)(0);
const [mouseY, setMouseY] = (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { className: className, style: Object.assign(Object.assign({}, style), { height,
width, overflow: 'hidden' }), onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, onMouseMove: handleMouseMovement, ref: ref, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign(Object.assign({}, transform), innerDivStyle), { transform: zoom ? `scale(${zoomScale})` : 'scale(1.0)' }), className: className }) }));
};
exports.default = Zoom;
//# sourceMappingURL=Zoom.js.map