Skip to content

A react component that accepts a high-res source image and produces a magnifier window on mouse hover over the part of the image the cursor is over

Notifications You must be signed in to change notification settings

quri/react-image-magnifier

 
 

Repository files navigation

react-image-magnifier

A react component that accepts a high-res source image and produces a magnifier window on mouse hover over the part of the image the cursor is over

Demo

Usage

import ImageMagnifer from 'react-image-magnifier';

const App = () => (
  <ImageMagnifier
    src="img/beach-small.jpg"
    height={300}
    width={400}
    zoomImage={{
      width: 1600,
      height: 1200
    }}
    cursorOffset={{ x: 80, y: -80 }}
  />
)

API (props)

Prop Required Default Type Description
src YES String URL of image
height NO "auto" Number or String height non-zoomed-in image
width NO "100%" Number or String width of the non-zoomed-in image
zoomImage NO src size { width, height } size of the zoomed-in image
cursorOffset NO { x: 0, y: 0 } { x, y } offset of the zoom bubble from the cursor
size NO 200 Number size of the magnifier window
style NO Object optional styling

About

A react component that accepts a high-res source image and produces a magnifier window on mouse hover over the part of the image the cursor is over

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%