react-medium-image-zoom

Qué es

react-medium-image-zoom es una librería de React, creada y mantenida por Robert Pearce (@rpearce) desde 2016, que reproduce la experiencia de zoom de imágenes popularizada por medium.com. Está escrita en TypeScript, no tiene dependencias de producción y funciona con elementos img, div, picture, figure y svg.

Para qué sirve

• Ampliar imágenes con una animación suave al hacer clic, como en los artículos de Medium.
• Mostrar fotografías, capturas o diagramas con un zoom accesible dentro de una app React.
• Integrar el zoom en proyectos con Next.js o Gatsby sin configuración adicional.
• Personalizar el contenido ampliado y el fondo mediante props del componente.

Cuándo usarlo

Es ideal cuando necesitas que el usuario pueda inspeccionar imágenes con detalle dentro de una interfaz React y quieres respetar la accesibilidad sin montar un lightbox completo. Si buscas galerías con miniaturas, navegación entre varias imágenes o vídeo, una librería tipo lightbox o un visor de medios más completo encajará mejor.

Ejemplo

Instalación y uso básico:

npm install react-medium-image-zoom

import Zoom from 'react-medium-image-zoom';
import 'react-medium-image-zoom/dist/styles.css';

function Foto() {
  return (
    <Zoom>
      <img src="/imagen.jpg" alt="Descripción de la imagen" width="500" />
    </Zoom>
  );
}

Puntos clave

• Cero dependencias de producción y escrita íntegramente en TypeScript.
• Pensada para la accesibilidad: probada con JAWS, NVDA, VoiceOver y TalkBack.
• Usa el elemento nativo dialog y ResizeObserver para el comportamiento de zoom.
• Compatible con Next.js y Gatsby, y soporta múltiples tipos de elemento (img, picture, figure, svg).

Ten en cuenta

El proyecto está activo (última versión v5.4.8) y se distribuye bajo licencia BSD-3-Clause. Al apoyarse en el elemento dialog y en ResizeObserver, requiere navegadores modernos; comprueba el soporte si necesitas compatibilidad con navegadores antiguos. Recuerda importar la hoja de estilos que incluye el paquete para que el zoom se vea correctamente.