1.2.1 • Published 6 years ago

react-looking-glass v1.2.1

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

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

PropTypeDefaultRequiredDescription
srcStringxThe source of the primary image
zoomFactorNumber3xThe amount to zoom the image by
sizeNumber200The size of the width and height of the magnifier in pixels
cursorOffsetObject{ x: 0, y: 0 }The offset of the magnifier from the cursor
zoomSrcStringAn optional higher resolution photo for the magnifier
displayZoomOneBooleanfalseWill show the magnifier when zoomFactor is equal to 1
scrollLinkedBooleantrueWill update the magnifier when the container scrolls, but this might break on some browsers
squareMagnifierBooleanfalseIf true, will display the magnifier as a square instead of a circle
classNameStringThe name of the class for the image holder (the root of the component)
imageClassNameStringThe name of the class for the image itself (only applies to the primary image)
zoomClassNameStringThe name of the class for the magnifying glass
hideCursorBooleanThe name of the class for the magnifying glass