React Image Gallery

Qué es

React Image Gallery es un componente de carrusel y galería de imágenes para React, creado por Xiaolin Li y mantenido por la comunidad. Está escrito en TypeScript y permite mostrar colecciones de imágenes con navegación por miniaturas, gestos táctiles y modo pantalla completa. Se instala como paquete npm y se distribuye con licencia MIT.

Para qué sirve

• Mostrar galerías de fotos o catálogos de producto en aplicaciones React.
• Crear carruseles responsive con miniaturas navegables en distintas posiciones.
• Ofrecer navegación por teclado, clic y deslizamiento táctil en móviles.
• Renderizar contenido personalizado en las diapositivas, como vídeos o iframes.

Cuándo usarlo

Es una buena opción cuando necesitas una galería de imágenes lista para usar en React sin construirla desde cero, con miniaturas, pantalla completa y soporte táctil ya resueltos. Si solo necesitas un carrusel genérico de cualquier contenido, alternativas como Swiper o Embla Carousel pueden encajar mejor; React Image Gallery está más enfocado en el caso concreto de galerías de imágenes.

Ejemplo

Instalación e integración básica:

npm install react-image-gallery

import ImageGallery from "react-image-gallery";
import "react-image-gallery/styles/image-gallery.css";

const items = [
  { original: "imagen1.jpg", thumbnail: "miniatura1.jpg" },
  { original: "imagen2.jpg", thumbnail: "miniatura2.jpg" },
];

function Galeria() {
  return <ImageGallery items={items} />;
}

Puntos clave

• Navegación táctil con sensibilidad de deslizamiento configurable y soporte de teclado.
• Miniaturas reposicionables (arriba, abajo, izquierda o derecha) y orientación vertical.
• Pantalla completa nativa o por CSS, carga diferida (lazy loading) y soporte RTL.
• Renderizado personalizado de diapositivas y personalización del tema con variables CSS.

Ten en cuenta

Requiere React como dependencia entre pares (peer dependency) y la hoja de estilos incluida; está pensado específicamente para galerías de imágenes, no como carrusel de propósito general. El proyecto se mantiene de forma activa (última versión v2.1.2) y se publica bajo licencia MIT.