react-image-zoom-on-hover

A simple React component for zooming images.

Installation

npm install react-image-zoom-on-hover

Basic usage

The component has only one required props: the link to the image.

Usage

import React from 'react';
import { ZoomImage } from 'react-image-zoom-on-hover';

const App = () => {
  return (
    <div>
      <ZoomImage imageUrl="https://example.com/path/to/image.jpg" />
    </div>
  );
};
export default App;

Props

• imageUrl (required): The URL of the image to be displayed.

• imageZoomPosition (optional): The position of the zoomed-in image. Can be set to "right" or "left". Defaults to "center" if not specified.

Examples

// Displaying the zoomed-in image on the center (default behavior)
<ZoomImage imageUrl="https://example.com/path/to/image.jpg" />

// Displaying the zoomed-in image on the left
<ZoomImage imageUrl="https://example.com/path/to/image.jpg" imageZoomPosition="left" />

Note

If the imageZoomPosition props is provided, it must have a valid value ("right" or "left"). Not providing this props or providing an invalid value may result in errors or unexpected behavior.