React Responsive Image Zoom 🔍

A lightweight and customizable React component that provides a smooth zoom effect on images when hovered over. It supports responsive zoom factors based on screen width breakpoints,adapting to different screen, and includes an optional debug mode.

✨ Features

🏋️‍♀️ Lightweight: Small bundle size, perfect for performance-conscious applications.
🔌 No external dependencies: Works out of the box with React.
📱 Responsive: Automatically adapts to different screen sizes, including mobile devices.
🎨 Customizable: Easily adjust zoom factors, transitions, and breakpoints.
🐞 Debug mode: Optional feature for development and testing.

📦 Installation

npm install react-responsive-image-zoom

🎥 Example

example

🚀 Usage

import React from 'react';
import { ImageZoom } from 'react-responsive-image-zoom';

const App = () => {
  return (
    <ImageZoom
      src="/path/to/image.jpg"
      defaultZoomFactor={1.5}
      transition={0.5}
      breakpoints={[
        { maxWidth: 768, zoomFactor: 1.2 },
        { maxWidth: 1024, zoomFactor: 1.4 }
      ]}
      imgClassName="my-image-class"
      debug={false}
    />
  );
};

export default App;

🎛️ Props

Prop	Type	Default	Description
`src`	`string`	-	The source URL of the image (required)
`defaultZoomFactor`	`number`	`1.3`	The default zoom factor to use when no breakpoints match
`transition`	`number`	`0.3`	The duration of the zoom transition in seconds
`breakpoints`	`Array<Breakpoint>`	`[]`	An array of breakpoints for responsive zoom factors
`imgClassName`	`string`	-	Additional CSS class name for the image element
`debug`	`boolean`	`false`	Enable debug mode to show current width and zoom factor

📊 Breakpoint Object

Property	Type	Description
`maxWidth`	`number`	The maximum screen width for this breakpoint
`zoomFactor`	`number`	The zoom factor to use for this breakpoint

🚀 Performance and Optimization

🏋️‍♀️ Lightweight: This package has a very small footprint, ensuring minimal impact on your application's load time and performance.
🔌 No Dependencies: react-responsive-image-zoom doesn't include any additional dependencies, keeping your project lean.
📱 Responsive Design: The component automatically adapts to different screen sizes, making it suitable for both desktop and mobile devices.
🖼️ Automatic Image Scaling: The underlying <img> element automatically scales to fit its container, ensuring proper display across different device sizes.
⚡ Optimized Rendering: Uses React.memo, useCallback, and useMemo for optimized performance.

⚠️ Note: When the debug prop is set to true, the component will update its state and re-render on every window resize event. This can impact performance, especially on devices with frequently changing viewport sizes. It's recommended to use the debug prop only during development or testing, and to disable it in production environments.# react-responsive-image-zoom

react-responsive-image-zoom