image-zoomer-react
Version:
A simple image zoomer component for React
45 lines (44 loc) • 2.69 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
function ImageZoom({ as, textMessage = "Click outside the image to close the zoom.", textBoxStyle, ...props }) {
const [isZoomed, setIsZoomed] = useState(false);
const ImageComponent = as || "img";
const toggleZoom = () => setIsZoomed(!isZoomed);
return (_jsxs(_Fragment, { children: [_jsx(ImageComponent, { style: {
cursor: "zoom-in",
}, onClick: toggleZoom, ...props }), _jsx(AnimatePresence, { children: isZoomed && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, style: {
position: "fixed",
inset: "0",
zIndex: 50,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "rgba(0, 0, 0, 0.75)",
}, onClick: toggleZoom, children: _jsx(motion.div, { initial: { scale: 0.8 }, animate: { scale: 1 }, exit: { scale: 0.8 }, style: {
position: "relative",
maxHeight: "100%",
maxWidth: "100%",
overflow: "hidden",
}, onClick: (e) => e.stopPropagation(), children: _jsxs("div", { style: {
display: "flex",
flexDirection: "column",
gap: "8px",
justifyContent: "center",
alignItems: "center",
}, children: [_jsx("img", { src: props.src, alt: props.alt, style: {
maxHeight: "90vh",
maxWidth: "90vw",
objectFit: "contain",
cursor: "zoom-out",
} }), textMessage && (_jsx("p", { style: {
color: "white",
backgroundColor: "rgba(0, 0, 0, 0.5)",
padding: "8px",
borderRadius: "8px",
textAlign: "center",
...props.textBoxStyle,
}, children: textMessage }))] }) }) })) })] }));
}
export default ImageZoom;