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

🚀 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