A React + Next.js compatible package for ecommerce-style product image zoom with lens, side-by-side preview, and modal functionality.
- 🔍 Lens Zoom - Amazon-style magnifying lens on hover
- 🖼️ Side-by-Side Preview - Real-time magnified view in separate container
- 🎨 Customizable Styling - Support for CSS objects, classes, Tailwind, styled-components
- ⚡ Performance Optimized - Lazy loading, efficient re-renders, SSR-friendly
- 📱 Responsive - Works on desktop and mobile devices
- 🔧 TypeScript - Full type safety and IntelliSense support
npm install @zoomlens/core
# or
yarn add @zoomlens/core
# or
pnpm add @zoomlens/coreimport { ZoomLens } from '@zoomlens/core';
function ProductImage() {
return (
<ZoomLens
src="/product-image.jpg"
zoomSrc="/product-image-large.jpg"
alt="Product image"
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
src |
string |
required | Main image URL |
zoomSrc |
string |
src |
High-resolution zoom image URL |
width |
number | string |
"auto" |
Width of main image |
height |
number | string |
"auto" |
Height of main image |
zoomPosition |
"left" | "right" | "top" | "bottom" | "original" |
"right" |
Where zoomed image appears |
zoomWidth |
number |
300 |
Width of zoom preview |
zoomScale |
number |
2 |
Magnification scale |
lensSize |
number |
100 |
Size of the lens (in px) |
lensStyle |
CSSProperties | string |
{} |
Custom CSS for lens |
zoomStyle |
CSSProperties | string |
{} |
Custom CSS for zoom container |
containerStyle |
CSSProperties | string |
{} |
Custom CSS for main container |
offset |
{x: number, y: number} |
{x: 0, y: 0} |
Offset for zoom container |
alt |
string |
"Zoomable image" |
Alt text for the image |
className |
string |
"" |
CSS class for main container |
<ZoomLens
src="/shirt.jpg"
zoomSrc="/shirt-large.jpg"
alt="Product shirt"
/><ZoomLens
src="/watch.jpg"
zoomSrc="/watch-large.jpg"
lensSize={120}
zoomScale={3}
zoomPosition="left"
lensStyle={{
border: "2px solid #000",
backgroundColor: "rgba(0,0,0,0.2)",
borderRadius: "50%"
}}
zoomStyle={{
border: "1px solid #ccc",
borderRadius: "8px"
}}
/><ZoomLens
src="/product.jpg"
className="rounded-lg shadow-lg"
lensStyle="border-2 border-blue-500 bg-blue-100 bg-opacity-30"
zoomStyle="border border-gray-300 rounded-lg shadow-xl"
/>See DEVELOPMENT_GUIDE.md for local development setup and testing instructions.
MIT © Jahidul Saeid
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Click-to-zoom modal functionality
- Mouse wheel scroll zoom
- Touch/pinch zoom for mobile
- Animation system
- Accessibility improvements
- Performance optimizations