{"id":11749,"library":"react-medium-image-zoom","title":"React Medium-style Image Zoom","description":"React Medium-style Image Zoom is a JavaScript library providing an accessible, high-fidelity image zooming experience inspired by Medium.com, specifically designed for React applications. Currently stable at version `5.4.3`, the project maintains an active release cadence with frequent patch and minor updates addressing bug fixes and introducing new features. A key differentiator is its comprehensive support for various image and content types, including standard `<img>` tags (with `object-fit`, `object-position`, `loading=\"lazy\"`), `<div>` and `<span>` elements with `background-image` properties, `<picture>`, `<figure>`, and even `<svg>`. The library prioritizes accessibility, offering robust screen reader support across major platforms (JAWS, NVDA, VoiceOver, TalkBack). It integrates seamlessly with modern React frameworks like Next.js and Gatsby, requiring React `^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0` and React DOM as peer dependencies. Notably, it boasts zero *direct* runtime dependencies, relying on native browser features like the `<dialog>` element and `ResizeObserver` for its core functionality. It expects an `ES2021` build target, potentially requiring transpilation for older environments.","status":"active","version":"5.4.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/rpearce/react-medium-image-zoom","tags":["javascript","react","medium","image","zoom","image-zoom","modal","react-component","typescript"],"install":[{"cmd":"npm install react-medium-image-zoom","lang":"bash","label":"npm"},{"cmd":"yarn add react-medium-image-zoom","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-medium-image-zoom","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required React runtime for component rendering and hooks.","package":"react","optional":false},{"reason":"Required React DOM for rendering, hydration, and portal management.","package":"react-dom","optional":false}],"imports":[{"note":"The main Zoom component is a default export.","wrong":"import { Zoom } from 'react-medium-image-zoom'","symbol":"Zoom","correct":"import Zoom from 'react-medium-image-zoom'"},{"note":"Required for default styling. Customize by overriding CSS variables.","symbol":"styles.css","correct":"import 'react-medium-image-zoom/dist/styles.css'"},{"note":"Use 'import type' for type-only imports to prevent bundling issues.","wrong":"import { UncontrolledProps } from 'react-medium-image-zoom'","symbol":"UncontrolledProps","correct":"import type { UncontrolledProps } from 'react-medium-image-zoom'"}],"quickstart":{"code":"import React from 'react'\nimport Zoom from 'react-medium-image-zoom'\nimport 'react-medium-image-zoom/dist/styles.css'\n\nexport const MyZoomableImage = () => (\n  <Zoom>\n    <img\n      alt=\"That Wanaka Tree, New Zealand by Laura Smetsers\"\n      src=\"https://rpearce.github.io/react-medium-image-zoom/static/media/thatwanakatree.ed672a9e.jpg\"\n      width=\"500\"\n      loading=\"lazy\"\n    />\n  </Zoom>\n)\n\n// Example of using custom content (more advanced)\nimport { ICompress, IEnlarge } from 'react-medium-image-zoom/dist/ui'\n\nexport const MyCustomZoomContent = () => (\n  <Zoom\n    overlayBg='rgba(0, 0, 0, 0.9)'\n    classDialog='custom-zoom-dialog'\n    IconUnzoom={ICompress}\n    IconZoom={IEnlarge}\n  >\n    <img\n      alt=\"Another image with custom zoom\"\n      src=\"https://rpearce.github.io/react-medium-image-zoom/static/media/another-image.jpeg\"\n      width=\"400\"\n    />\n  </Zoom>\n)\n","lang":"javascript","description":"Demonstrates basic usage of the `Zoom` component with a standard `<img>` tag and an example of custom zoom content and icons."},"warnings":[{"fix":"Ensure your project's build configuration (e.g., Babel, esbuild) targets ES2021 or transpiles the library's output for older browser compatibility.","message":"The package is built for ES2021 environments. Older browsers may require additional transpilation or polyfills for the library to function correctly, particularly for features like Promise, async/await, and modern array methods.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Check `caniuse.com` for `<dialog>` and `ResizeObserver` support. For older browsers, consider adding polyfills like `dialog-polyfill` and `resize-observer-polyfill`.","message":"This library relies on native browser features such as the `<dialog>` HTML element and `ResizeObserver` API. Ensure your target browsers support these APIs or provide appropriate polyfills for wider compatibility.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"No direct fix needed, but be aware of the client-side rendering implications for pages where you might expect full server rendering for components wrapping `Zoom`.","message":"For compatibility with React Server Components (RSC) in frameworks like Next.js, versions >=5.2.10 include a 'use client' directive in its ESM output. This means components utilizing `react-medium-image-zoom` will be rendered on the client side.","severity":"gotcha","affected_versions":">=5.2.10"},{"fix":"Upgrade to `react-medium-image-zoom` v5.4.3 or newer, which includes specific fixes for improved React server-side rendering compatibility.","message":"Prior to v5.4.3, users might encounter issues with React Server-Side Rendering (SSR), leading to hydration mismatches or errors during server compilation.","severity":"gotcha","affected_versions":"<5.4.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that the `src` prop of the `<img>` element always contains a valid image URL when the `Zoom` component is rendered. If the `src` is dynamic, render `Zoom` only after the `src` is available, or use a placeholder.","cause":"Occurs when the `<img>` element passed as a child to the `Zoom` component is rendered with an empty or undefined `src` prop.","error":"An empty string was passed to the src attribute"},{"fix":"Upgrade to `react-medium-image-zoom` v5.4.3 or newer for improved SSR compatibility. Ensure your build toolchain correctly processes the 'use client' directive if you're using React Server Components.","cause":"Issues during server-side rendering or subsequent client-side hydration, often related to the client-only nature of certain components or browser API dependencies.","error":"TypeError: Cannot read properties of undefined (reading 'appendChild') or other hydration errors during SSR."},{"fix":"Refer to the library's documentation for specific patterns to handle nested dialogs. Recent versions (>=5.2.11) include fixes for zooming inside dialogs; upgrading may resolve the issue. You might also need to adjust `z-index` properties or `overflow` styles of the parent container.","cause":"Interference from parent dialog's CSS stacking context, event handlers (e.g., click-outside-to-close), or focus management.","error":"Image does not zoom or zooms incorrectly when placed inside another modal or dialog component."}],"ecosystem":"npm"}