react-responsive-image-zoom v1.0.1

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

📊 Breakpoint Object

🚀 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