children

React.ReactNode

-

Content to be magnified (images, divs, any React elements)

Required

zoomFactor

number

-

Magnification level (1.1 to 5). Default: 1.5

Optional

lensSize

number

-

Diameter of the lens in pixels (50-300). Default: 170

Optional

isStatic

boolean

-

Whether lens is always visible at fixed position. Default: false

Optional

position

{ x: number; y: number }

-

Fixed position for static lens. Default: { x: 200, y: 150 }

Optional

hovering

boolean

-

External control of hover state for interactive lens

Optional

setHovering

(hovering: boolean) => void

-

Callback for hover state changes

Optional

className

string

-

Additional CSS classes for the container

Optional

borderRadius

string

-

Tailwind border radius class (sm, md, lg, xl). Default: 'lg'

Optional

borderWidth

number

-

Border thickness around lens (0-4). Default: 0

Optional

borderColor

string

-

Border color class. Default: 'border-gray-300'

Optional

shadowIntensity

'none' | 'light' | 'medium' | 'heavy'

-

Drop shadow intensity for lens. Default: 'medium'

Optional

animationDuration

number

-

Animation duration in seconds (0.1-2). Default: 0.3

Optional

animationEasing

string

-

CSS easing function. Default: 'easeOut'

Optional

maskShape

'circle' | 'square'

-

Shape of the lens mask. Default: 'circle'

Optional

opacity

number

-

Lens opacity (0-1). Default: 1

Optional

blurEdge

boolean

-

Whether to blur the edges of the lens. Default: false

Optional

smoothFollow

boolean

-

Smooth mouse following vs snapped grid movement. Default: true

Optional

disabled

boolean

-

Disable lens interaction. Default: false

Optional

Lens

How to Import

Props

Basic Usage

On This Page

Contribute

Lens

How to Import

Props

Basic Usage

On This Page

Contribute

React Lens Component - Lightswind UI

Key Details of React Lens

Lens

How to Import

Props

Basic Usage

On This Page

Contribute

Lens

How to Import

Props

Basic Usage

On This Page

Contribute