react-magnifier

React image zoom component

- Simple and customizable
- Supports touch screens
- Allows different files for large image and magnifying glass (e.g. thumbnail and high-resolution image)

→ Demo

Usage

Install the package using NPM:

``
npm install react-magnifier
`

Add the component to your React application:

`jsx
import Magnifier from "react-magnifier";
import yourImage from "./path/to/image";

export default function ExampleComponent() {
return ;
}
`

Configuration

| Prop | Type | Default | Description |
| ---------------- | ------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| src (required) | String | – | URL/path of the large image |
| height | Number/String | 'auto' | Image height (absolute or relative values possible) |
| width | Number/String | '100%' | Image width (absolute or relative values possible) |
| className | String | '' | Class which will be applied to the image wrapper |
| zoomImgSrc | String | – | URL/path of the image inside the magnifying glass (if not specified, the large image will be used) |
| zoomFactor | Number | 1.5 | Factor by which the zoom image will be scaled (based on the size of the large image) |
| mgWidth | Number | 150 | Width of the magnifying glass in px |
| mgHeight | Number | 150 | Height of the magnifying glass in px |
| mgBorderWidth | Number | 2 | Border width of the magnifying glass in px |
| mgShape | String | 'circle' | Shape of the magnifying glass (possible values: 'circle', 'square') |
| mgShowOverflow | Boolean | true | Set this to false to cut off the magnifying glass at the image borders. When disabling mgShowOverflow, it's recommended that you also set all offsets to 0 |
| mgMouseOffsetX | Number | 0 | Horizontal offset of the magnifying glass in px when hovering with a mouse |
| mgMouseOffsetY | Number | 0 | Vertical offset of the magnifying glass in px when hovering with a mouse |
| mgTouchOffsetX | Number | -50 | Horizontal offset of the magnifying glass in px when dragging on a touch screen |
| mgTouchOffsetY | Number | -50 | Vertical offset of the magnifying glass in px when dragging on a touch screen |

Any other props will be passed down to the element. This way, you can e.g. add an alt attribute to the image.

Custom styling

`css
.magnifier {
/ Styles for