react-looking-glass v1.2.1

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