Content Display

Magnifier Lens

이미지, 비디오, 기타 요소를 렌즈처럼 확대해 볼 수 있는 컴포넌트입니다.

Preview

content media

Magnifier Lens

hover to inspect the image

image placeholder

Your next camp

See our latest and best camp destinations across the globe.

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/lens.json

Code

typescript
Copied
1import { Lens } from "@/components/lens"23export default function Example() {4  return (5    <Lens>6      <img src="/images/lens-demo.jpg" alt="Lens demo" />7    </Lens>8  )9}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
zoomFactornumber1.3The magnification factor.
lensSizenumber170The lens size in pixels.
isStaticbooleanfalseWhether the lens remains fixed.
durationnumber0.1Animation duration in seconds.
lensColorstring"black"Color used by the mask.

Reference

Reference Magnifier Lens