@jojovms/react-lens-zoom

React wrapper for @jojovms/lens-zoom-core.

Installation

npm install @jojovms/react-lens-zoom

Usage

Wrap your image with the <LensZoom> component.

import { LensZoom } from '@jojovms/react-lens-zoom';

function ProductPage() {
  return (
    <LensZoom zoom={3} lensSize={150} borderColor="red">
      <img src="sneaker.jpg" alt="Cool Sneaker" />
    </LensZoom>
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | zoom | number | 2 | Magnification level. | | lensSize | number | 100 | Diameter of the lens. | | lensColor | string | rgba... | Background tint of the lens. | | borderColor | string | '#000' | Border color. |

Any other props (className, style, id) are passed to the wrapper div.