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.
npm install react-medium-image-zoomVerified import paths — ran on the pinned version, not inferred.
Demonstrates basic usage of the `Zoom` component with a standard `<img>` tag and an example of custom zoom content and icons.
Ensure your project's build configuration (e.g., Babel, esbuild) targets ES2021 or transpiles the library's output for older browser compatibility.
Check `caniuse.com` for `<dialog>` and `ResizeObserver` support. For older browsers, consider adding polyfills like `dialog-polyfill` and `resize-observer-polyfill`.
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`.
Upgrade to `react-medium-image-zoom` v5.4.3 or newer, which includes specific fixes for improved React server-side rendering compatibility.
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.
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.
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.