A lightweight and customizable image magnifier component for React. This package allows you to zoom in on specific parts of an image using a magnifying glass effect.
To install the package, use npm:
npm install react-image-magnifier-zoom
or with yarn:
yarn add react-image-magnifier-zoom
Here's an example of how to use the ImageZoom
component in your React project.
import React from 'react';
import ImageZoom from 'react-image-magnifier-zoom';
function App() {
return (
<div>
<h1>Image Magnifier Example</h1>
<ImageZoom
src="https://via.placeholder.com/800"
width={300}
height={300}
magnifierSize={100}
zoomLevel={2.5}
enabled={true}
/>
</div>
);
}
export default App;
-
src
: The source URL of the image. -
width
: Width of the main image. -
height
: Height of the main image. -
magnifierSize
(optional): Diameter of the magnifier circle (default is150
). -
zoomLevel
(optional): Magnification level for the zoomed image (default is2.5
). -
enabled
(optional): Enables or disables the magnifier feature (default istrue
).
Prop | Type | Default | Description |
---|---|---|---|
src |
string |
"" |
The image source URL. |
width |
number |
200 |
The width of the main image. |
height |
number |
200 |
The height of the main image. |
magnifierSize |
number |
150 |
Diameter of the magnifier circle. |
zoomLevel |
number |
2.5 |
The zoom level for the magnifier effect. |
enabled |
boolean |
true |
Whether the magnifier functionality is enabled or disabled. |
You can customize the ImageZoom
component by adjusting the properties:
- Change the size of the magnifier with
magnifierSize
. - Adjust the zoom level with
zoomLevel
. - Enable or disable the magnifier with the
enabled
prop.
- Ensure that the
src
prop points to a valid image URL. - If using local images, make sure they are correctly imported in your React project.
This package is licensed under the MIT License.