Content Display

Magnifier Lens

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

Preview

content media

Magnifier Lens

hover to inspect the image

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

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/lens.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/lens.json

bash

Copied

1bunx 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

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the component.
zoomFactor	number	1.3	The magnification factor.
lensSize	number	170	The lens size in pixels.
isStatic	boolean	false	Whether the lens remains fixed.
duration	number	0.1	Animation duration in seconds.
lensColor	string	"black"	Color used by the mask.

Reference

Reference Magnifier Lens