1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capaslightboximageoverlay

Image Lightbox

Visor de imágenes sobre capa oscura a pantalla completa con controles de cierre.

Nature Landscape / 2024

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { LightboxOverlay } from 'react-component-kit-ui/overlays';

<LightboxOverlay>Content</LightboxOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/LightboxOverlay.tsx + LightboxOverlay.css:

LightboxOverlay.tsx
'use client';

import './LightboxOverlay.css';

/** LightboxOverlay — ported from astro-component-kit. */
export interface LightboxOverlayProps {
}

export function LightboxOverlay({}: LightboxOverlayProps) {
  return (
    <>
      <div className="lightbox" data-rk-746ba1="">
        <div className="close" data-rk-746ba1="">×</div>
        <div className="img-preview" data-rk-746ba1=""></div>
        <div className="caption" data-rk-746ba1="">Nature Landscape / 2024</div>
      </div>
    </>
  );
}

export default LightboxOverlay;
LightboxOverlay.css
/* LightboxOverlay — ported from astro-component-kit (overlays/LightboxOverlay.astro) */

.lightbox:where([data-rk-746ba1]) { position: fixed; inset: 0; background: #000; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.close:where([data-rk-746ba1]) { position: absolute; top: 2rem; right: 2rem; color: #fff; font-size: 2.2rem; cursor: pointer; }
.img-preview:where([data-rk-746ba1]) { width: 80%; height: 70%; background: #1e293b; border-radius: 12px; }
.caption:where([data-rk-746ba1]) { margin-top: 2rem; color: #94a3b8; font-family: monospace; }

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
LightboxOverlay.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
lightboximageoverlay