React Looking Glass

A React component for magnifying images using a magnifying/looking glass effect.

React Looking Glass offers some advantages over other similar components:

• Simple: Only set the source of the image and an amount to zoom by, everything else is optional
• Support for all devices: Works with mouse and touch events
• Uses React listeners: I made this component because alternatives would break my modals from creating native listeners after the component was rendered
• Small: This component only relies on two dependencies, React and PropTypes, so it is only 8kB
• Simple style: Rather than passing in many different styles as props, they can easily be modified with className

You can view detailed usage examples at the Storybook, or a simple example on CodeSandbox.

Usage

Install the package using NPM:

npm install react-looking-glass

Use the component:

import LookingGlass from "react-looking-glass";
import image from "./path";
 
<LookingGlass src={image} zoomFactor={4} />

Props

Prop	Type	Default	Required	Description
src	String		x	The source of the primary image
zoomFactor	Number	3	x	The amount to zoom the image by
size	Number	200		The size of the width and height of the magnifier in pixels
cursorOffset	Object	{ x: 0, y: 0 }		The offset of the magnifier from the cursor
zoomSrc	String			An optional higher resolution photo for the magnifier
displayZoomOne	Boolean	false		Will show the magnifier when zoomFactor is equal to 1
scrollLinked	Boolean	true		Will update the magnifier when the container scrolls, but this might break on some browsers
squareMagnifier	Boolean	false		If true, will display the magnifier as a square instead of a circle
className	String			The name of the class for the image holder (the root of the component)
imageClassName	String			The name of the class for the image itself (only applies to the primary image)
zoomClassName	String			The name of the class for the magnifying glass
hideCursor	Boolean			The name of the class for the magnifying glass