react-photoswipe-gallery

Qué es

react-photoswipe-gallery es una librería de componentes React, mantenida por dromru, que envuelve PhotoSwipe (la conocida galería de imágenes en JavaScript) para usarla de forma declarativa. Está escrita casi por completo en TypeScript y expone los componentes Gallery e Item para montar galerías con lightbox. Es compatible con PhotoSwipe v5; para PhotoSwipe v4 hay que usar la versión 1 de esta librería.

Para qué sirve

• Mostrar galerías de imágenes con visor a pantalla completa (lightbox) en aplicaciones React.
• Abrir imágenes en zoom con gestos táctiles, navegación y cierre, sin escribir el pegamento manual con PhotoSwipe.
• Añadir pies de foto, botón de descarga y elementos de interfaz personalizados al visor.
• Controlar la galería de forma programática mediante hooks y props de render.

Cuándo usarlo

Es la opción adecuada cuando trabajas en React y quieres aprovechar PhotoSwipe sin gestionar a mano su ciclo de vida ni el DOM. Encaja en portfolios, tiendas, blogs o cualquier interfaz con imágenes ampliables. Si no usas React, conviene ir directamente a PhotoSwipe; y si solo necesitas un lightbox sencillo, existen alternativas más ligeras como yet-another-react-lightbox.

Ejemplo

Instalación (requiere instalar también photoswipe como dependencia):

npm install photoswipe react-photoswipe-gallery

Uso básico con el patrón de render props:

import 'photoswipe/dist/photoswipe.css'
import { Gallery, Item } from 'react-photoswipe-gallery'

const MyGallery = () => (
  <Gallery>
    <Item
      original="https://example.com/image.jpg"
      thumbnail="https://example.com/thumb.jpg"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img ref={ref} onClick={open} src="thumb.jpg" />
      )}
    </Item>
  </Gallery>
)

Puntos clave

• Componentes declarativos Gallery e Item con patrón de render props (ref y open).
• Soporte para navegación por hash en la URL, pies de foto y botón de descarga.
• Imágenes responsive mediante srcset y soporte de plugins de PhotoSwipe.
• Tipado completo en TypeScript y control programático mediante hooks.

Ten en cuenta

Necesita React 16.8 o superior e instalar photoswipe por separado. Está atado a la versión 5 de PhotoSwipe: si tu proyecto usa PhotoSwipe v4, debes quedarte en la versión 1 de esta librería. El proyecto está activo y publicado bajo licencia MIT.