🔍 React Image Magnifier Component

A customizable image magnifier component built with React and TypeScript, designed to work like a lens zoom tool. It supports circle or square lens shapes, zoom control, spotlight and blur effects, and full-screen image magnification.

📦 Features

• Zoom-in lens on hover or click
• Lens shape: circle or square 0r Rectangle or Ellipse
• Adjustable lens size and zoom level
• Spotlight or blur background effect
• Scroll-safe
• Fully typed with TypeScript

Configuration

| Prop | Type | Default | Description | | ----------------- | ------------------------- | ------------ | --------------------------------------- | | src | string | Required | Image URL to magnify | | width | number \| string | Required | Width of the base image | | height | number \| string | Required | Height of the base image | | magnifierHeight | number | 100 | Height of the magnifying lens | | magnifieWidth | number | 100 | Width of the magnifying lens | | zoomLevel | number | 2 | Magnification level | | Shape | "circle" \| "square" | "square" | Shape of the magnifier | | magniferOpen | boolean | false | Controls lens visibility | | setMagniferOpen | (open: boolean) => void | Required | Function to toggle magnifier | | borderColor | string | #712F79 | Border color of the lens | | blur | boolean | false | Apply blur to background image | | spotlight | boolean | false | Darken background except magnified area |

🚀 Installation

Install it via npm or yarn:

npm install your-package-name
# or
yarn add your-package-name