{"library":"react-magnifier","title":"React Magnifier Component","description":"react-magnifier is a lightweight React component designed to provide interactive image zooming functionality, allowing users to magnify specific areas of an image. It is currently stable at version 3.0.4, with recent releases focusing on bug fixes, TypeScript migration, and broad browser compatibility (targeting ES3 since v3.0.4). The library exhibits a moderate release cadence, addressing issues and introducing enhancements as needed. Key differentiators include built-in support for touch screens, the ability to specify a separate, higher-resolution image for the magnified view (e.g., a thumbnail and a full-size image), and extensive customization options for the magnifying glass's appearance, shape, and behavior through props such as `zoomFactor`, `mgShape`, and `mgShowOverflow`. It functions as a pure presentation component, requiring React v16.0.0 or higher as a peer dependency.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install react-magnifier"],"cli":null},"imports":["import Magnifier from 'react-magnifier';","import type { MagnifierProps } from 'react-magnifier';","const Magnifier = require('react-magnifier').default;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import Magnifier from 'react-magnifier';\nimport yourImage from './path/to/your-high-res-image.jpg';\nimport yourThumbnail from './path/to/your-thumbnail.jpg';\n\nexport default function ImageZoomComponent() {\n  return (\n    <div style={{ width: '80%', margin: '20px auto' }}>\n      <h1>Product Image Viewer</h1>\n      <p>Hover or touch the image to magnify.</p>\n      <Magnifier\n        src={yourThumbnail}\n        zoomImgSrc={yourImage}\n        width={600}\n        height={400}\n        zoomFactor={2.5}\n        mgWidth={200}\n        mgHeight={200}\n        mgShape=\"square\"\n        alt=\"Product showcase with zoom\"\n      />\n      <p>The `src` prop displays the initial image, and `zoomImgSrc` provides a higher-resolution image for the magnifying glass. If `zoomImgSrc` is omitted, `src` will be used for both.</p>\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to integrate the Magnifier component, showcasing basic image zoom functionality using separate source images for the thumbnail and the zoomed view, along with common customization props like `zoomFactor` and `mgShape`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}