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-blog.vercel.app/r/lens.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/lens.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/lens.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/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

children

Type: React.ReactNode
Default: -
Description: Content rendered inside the component.

zoomFactor

Type: number
Default: 1.3
Description: The magnification factor.

lensSize

Type: number
Default: 170
Description: The lens size in pixels.

isStatic

Type: boolean
Default: false
Description: Whether the lens remains fixed.

duration

Type: number
Default: 0.1
Description: Animation duration in seconds.

lensColor

Type: string
Default: "black"
Description: Color used by the mask.

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