React Image Zoom

A lightweight, performant React component for image zooming with pan and zoom functionality. Perfect for product galleries, photo viewers, and any application requiring interactive image exploration.

Features

• 🔍 Mouse wheel zoom - Smooth zooming with mouse wheel
• 👆 Touch support - Mobile-friendly touch gestures
• 🖱️ Drag to pan - Pan around zoomed images
• 🎯 Double-click zoom - Quick zoom toggle
• 🎮 Control buttons - Optional zoom controls
• ⚡ Lightweight - Minimal dependencies
• 🎨 Customizable - Flexible styling options
• 📱 Responsive - Works on all screen sizes

Installation

npm install react-image-zoom

or

yarn add react-image-zoom

Basic Usage

import React from "react";
import { ImageZoom } from "react-image-zoom";

function App() {
  return (
    <div>
      <ImageZoom
        src="https://example.com/image.jpg"
        alt="Zoomable image"
        width="400px"
        height="300px"
      />
    </div>
  );
}

Advanced Usage

import React, { useState } from "react";
import { ImageZoom } from "react-image-zoom";

function Gallery() {
  const [currentZoom, setCurrentZoom] = useState(1);

  return (
    <div>
      <ImageZoom
        src="https://example.com/high-res-image.jpg"
        alt="Product image"
        width="500px"
        height="400px"
        maxZoom={5}
        minZoom={0.5}
        zoomStep={0.2}
        onZoomChange={(zoom) => setCurrentZoom(zoom)}
        className="custom-zoom-container"
        style={{ border: "2px solid #ddd" }}
      />
      <p>Current zoom: {currentZoom.toFixed(1)}x</p>
    </div>
  );
}

API Reference

Props

| Prop | Type | Default | Description | | -------------- | ------------------ | ------------ | ----------------------------- | | src | string | Required | Image source URL | | alt | string | '' | Image alt text | | width | number or string | '100%' | Container width | | height | number or string | 'auto' | Container height | | maxZoom | number | 3 | Maximum zoom level | | minZoom | number | 1 | Minimum zoom level | | zoomStep | number | 0.1 | Zoom increment/decrement step | | className | string | '' | Additional CSS class | | style | object | {} | Inline styles object | | onZoomChange | function(zoom) | undefined | Zoom change callback |

Controls

• Mouse Wheel: Zoom in/out
• Double Click: Toggle between min and max zoom
• Drag: Pan the image when zoomed in
• Control Buttons:
  • + button: Zoom in
  • - button: Zoom out
  • Reset button: Reset to minimum zoom

Styling

The component comes with default styles, but you can customize it using CSS:

/* Container styling */
.image-zoom-container {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Custom control buttons */
.image-zoom-controls button {
  background: #007bff;
  color: white;
}

.image-zoom-controls button:hover {
  background: #0056b3;
}

Examples

Product Gallery

<ImageZoom
  src="/product-image.jpg"
  alt="Product detail"
  width="100%"
  maxZoom={4}
  style={{ maxWidth: "600px" }}
/>

Photo Viewer

<ImageZoom
  src="/photo.jpg"
  alt="Photo"
  width="800px"
  height="600px"
  maxZoom={6}
  zoomStep={0.25}
  onZoomChange={(zoom) => console.log(`Zoom: ${zoom}x`)}
/>

Responsive Gallery

<ImageZoom
  src="/image.jpg"
  alt="Responsive image"
  width="100%"
  height="50vh"
  maxZoom={3}
  style={{
    maxWidth: "100%",
    margin: "0 auto",
  }}
/>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Development

To run the example locally:

1. Clone the repository
2. Install dependencies: npm install
3. Build the package: npm run build
4. Open example/index.html in your browser

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT [Your Name]

Changelog

1.0.0

• Initial release
• Mouse wheel zoom
• Drag to pan
• Double-click zoom
• Control buttons
• Mobile responsive