'use client'; import { cn } from '@/lib/utils'; import { animate, motion, useMotionValue, useTransform } from 'motion/react'; import type React from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; interface ViewMagnifierProps { children: React.ReactNode; className?: string; maxScale?: number; onScaleChange?: (isActive: boolean) => void; onMaxScaleReached?: (isAtMax: boolean) => void; } const ViewMagnifier: React.FC = ({ className, children, maxScale = 1.8, onScaleChange, onMaxScaleReached, ...props }) => { const [isMouseDown, setIsMouseDown] = useState(false); const [zoomLevel, setZoomLevel] = useState(100); const [isAtMaxScale, setIsAtMaxScale] = useState(false); const containerRef = useRef(null); const startX = useRef(0); const initialScale = useRef(1); const scale = useMotionValue(1); const opacity = useTransform(scale, [1, maxScale], [0, 1]); const containerScale = useTransform(scale, [1, maxScale], [1, 1.6]); // Monitor scale changes for max scale callback useEffect(() => { const unsubscribe = scale.on('change', (latestScale) => { const newIsAtMaxScale = Math.abs(latestScale - maxScale) < 0.01; if (newIsAtMaxScale !== isAtMaxScale) { setIsAtMaxScale(newIsAtMaxScale); onMaxScaleReached?.(newIsAtMaxScale); } }); return () => unsubscribe(); }, [scale, maxScale, isAtMaxScale, onMaxScaleReached]); const handleZoomAnimation = useCallback( (targetScale: number) => { animate(scale, targetScale, { type: 'spring', stiffness: 400, damping: 30, onUpdate: (latest) => setZoomLevel(Math.round(latest * 100)), }); }, [scale] ); const handlePointerDown = useCallback( (e: React.PointerEvent): void => { setIsMouseDown(true); startX.current = e.clientX; initialScale.current = scale.get(); e.currentTarget.setPointerCapture(e.pointerId); onScaleChange?.(true); }, [scale, onScaleChange] ); const handlePointerUp = useCallback( (e: React.PointerEvent): void => { if (isMouseDown) { setIsMouseDown(false); handleZoomAnimation(1); e.currentTarget.releasePointerCapture(e.pointerId); onScaleChange?.(false); } }, [isMouseDown, handleZoomAnimation, onScaleChange] ); const handlePointerMove = useCallback( (e: React.PointerEvent): void => { if (!isMouseDown) return; const deltaX = e.clientX - startX.current; const scaleChange = deltaX * 0.005; const newScale = Math.max( 0.8, Math.min(maxScale, initialScale.current + scaleChange) ); scale.set(newScale); setZoomLevel(Math.round(newScale * 100)); }, [isMouseDown, maxScale, scale] ); return (

); }; export ViewMagnifier;

Prop	Type	Description	Default
children	React.ReactNode	Children to be magnified
className	string	Additional classes for the container
maxScale	number	Maximum scale of the magnifier	1.8
onScaleChange	(isActive: boolean) => void	Callback function when the scale changes
onMaxScaleReached	(isAtMax: boolean) => void	Callback function when the maximum scale is reached

View Magnifier

Installation

Props

Examples

Example 1