{"id":18060,"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.","status":"active","version":"3.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/samuelmeuli/react-magnifier","tags":["javascript","react","component","image","zoom","magnify","magnifier","magnifying glass","typescript"],"install":[{"cmd":"npm install react-magnifier","lang":"bash","label":"npm"},{"cmd":"yarn add react-magnifier","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-magnifier","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the React component framework.","package":"react","optional":false}],"imports":[{"note":"This component is exported as a default export.","wrong":"import { Magnifier } from 'react-magnifier';","symbol":"Magnifier","correct":"import Magnifier from 'react-magnifier';"},{"note":"For TypeScript users, import prop types from the package.","symbol":"MagnifierProps","correct":"import type { MagnifierProps } from 'react-magnifier';"},{"note":"While primarily an ESM library, CommonJS users must access the `.default` property for the default export.","wrong":"const Magnifier = require('react-magnifier');","symbol":"Magnifier (CJS)","correct":"const Magnifier = require('react-magnifier').default;"}],"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`."},"warnings":[{"fix":"Review existing code for type-related errors or implicit dependencies on internal implementation details. Ensure your build pipeline supports TypeScript if consuming types.","message":"Version 3.0.0 migrated the codebase to TypeScript. While generally an improvement, this could introduce subtle breaking changes for consumers relying on previous internal module structures or type declarations if manually managed. It also fixed issues with event listener removal.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Test your application's image zoom functionality thoroughly after upgrading. Adjust `mgShowOverflow`, `mgMouseOffsetX`, `mgMouseOffsetY`, and other related props to match desired behavior, especially if migrating from pre-v2.0.0 versions.","message":"Version 2.0.0 introduced significant changes to the magnifying behavior, particularly close to the image borders. This may result in different glass positioning or cropping compared to prior versions. New props like `mgShowOverflow` and `borderWidth` were also added, potentially altering default visual characteristics.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always provide a valid image URL or path to the `src` prop. For example: `<Magnifier src={yourImagePath} />`.","message":"The `src` prop is required for the `Magnifier` component to render an image. Omitting it will lead to runtime errors or a non-functional component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project's `react` and `react-dom` dependencies are at version `16.0.0` or higher to satisfy the peer dependency requirements.","message":"The package lists `react: \"^16.0.0\"` as a peer dependency. Using `react-magnifier` with older versions of React may lead to peer dependency warnings or runtime issues, especially related to Hooks which were introduced in React 16.8.","severity":"gotcha","affected_versions":"<16.0.0 of React"},{"fix":"Upgrade to `react-magnifier@3.0.3` or newer to resolve the `zoomImgSrc` type definition issue. If unable to upgrade, you may need to explicitly define `zoomImgSrc` or assert its type.","message":"Between versions 3.0.0 and 3.0.2, TypeScript users might have encountered a type error related to the `zoomImgSrc` prop, specifically a missing default or incorrect type definition, leading to compilation failures.","severity":"gotcha","affected_versions":">=3.0.0 <3.0.3"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Upgrade `react-magnifier` to version 3.0.3 or higher. If upgrading is not immediately possible, explicitly pass a value (even an empty string) for `zoomImgSrc` or ensure your TypeScript configuration handles optional properties correctly.","cause":"This error, particularly related to `zoomImgSrc`, occurred in `react-magnifier` versions 3.0.0 to 3.0.2 due to a missing default for the prop's type definition.","error":"TypeError: Cannot read properties of undefined (reading 'defaultProps')"},{"fix":"Ensure that a valid string path or URL is always passed to the `src` prop of the `Magnifier` component. Example: `<Magnifier src=\"/images/my-product.jpg\" />`.","cause":"The `src` prop, which specifies the URL or path of the image to be magnified, was not provided to the `Magnifier` component.","error":"Warning: Failed prop type: The prop `src` is marked as required in `Magnifier`, but its value is `undefined`."},{"fix":"Verify that your project's `react` and `react-dom` dependencies are at version `16.8.0` or higher. Also, check for potential issues with `npm link` or multiple installations of React that can cause the 'Invalid hook call' error.","cause":"This error typically occurs if `react-magnifier` (which is a functional component using React Hooks) is used with a React version older than 16.8, or if there's a misconfiguration in the React environment causing multiple copies of React.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component. (If using older React versions)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}