- Tamaño del bundle
- 13 kB
- Dependencias en runtime
- 0
- Descargas semanales en npm
- 1k+
liftbox es un lightbox open source con licencia MIT para React 18 y 19, publicado en npm como liftbox (empezó como @esdrassantos06/gallery). Abre imágenes, vídeos y embeds sobre la página con una animación que sale de la miniatura pulsada, recortada igual, y vuelve a ella al cerrar. El paquete entero no tiene dependencias en runtime y pesa unos 13 kB de JavaScript y 3 kB de CSS, minificados y comprimidos con brotli.
El input se basa en Pointer Events: swipe entre slides, pinch, rueda del ratón o doble toque para hacer zoom, arrastrar para mover una imagen ampliada sin perder los bordes y pinch hacia fuera para cerrar. Los slides se pueden rotar, abrir a pantalla completa, pasar en slideshow, descargar o compartir. Los vídeos se reproducen desde YouTube a través de youtube-nocookie.com, desde Vimeo con do not track, como vídeo nativo o en cualquier reproductor personalizado renderizado en un slot.
Incluye además rejillas masonry, justified y uniformes con filtro por categoría, sirve AVIF o WebP mediante fuentes picture y guarda el slide abierto en el hash de la URL, por número o por nombre, para que una foto se pueda enlazar y el botón de atrás la cierre. Sigue siendo rápido con miles de slides: la imagen actual carga primero, la precarga se adapta a conexiones lentas y la tira de miniaturas y las rejillas solo renderizan lo que está a la vista.
La accesibilidad fue lo primero. El lightbox es un diálogo modal con focus trap, el foco vuelve a la miniatura al cerrar, una live region anuncia el slide actual, cada acción tiene un atajo de teclado y se respeta el movimiento reducido. También soporta layouts de derecha a izquierda, renderiza de forma segura en el servidor y expone todo el tema como propiedades CSS personalizadas.
La librería se escribió con los tests primero: tests unitarios con Vitest, tests end to end con Playwright en escritorio y en un perfil móvil, CI en React 18 y 19, presupuestos de tamaño y comprobaciones del paquete publicado. Las releases salen de GitHub Actions con Trusted Publishing de npm y provenance, y la documentación vive en liftbox.digital, un sitio en Next.js y Fumadocs servido como páginas estáticas desde la CDN, con una Content Security Policy fija, una comparación honesta con otros cinco lightbox para React y guías de migración desde yet-another-react-lightbox y lightGallery.