Lightbox

Lightbox is a component that displays images in a modal dialog with navigation controls. It allows users to view images in a larger size and navigate through a collection of images.

CSS dependencies

@import url("@uxf/ui/css/icon.css");
@import url("@uxf/ui/css/lightbox.css");

Basic Usage

import { Lightbox, useLightboxImage } from "@uxf/ui/lightbox";

function ImageGallery() {
  const images = [
    { src: "image1.jpg", title: "Image 1" },
    { src: "image2.jpg", title: "Image 2" },
    { src: "image3.jpg", title: "Image 3" },
  ];

  return (
    <Lightbox>
      <div className="flex gap-2">
        {images.map((image) => (
          <GalleryImage 
            key={image.src} 
            src={image.src} 
            title={image.title} 
          />
        ))}
      </div>
    </Lightbox>
  );
}

function GalleryImage(props: { src: string; title: string }) {
  // useLightboxImage hook registers the image with the Lightbox context
  const openLightbox = useLightboxImage({
    src: props.src,
    title: props.title,
    // Optional custom content to display with the image
    customContent: <div>Custom description for {props.title}</div>,
  });

  return (
    <img
      src={props.src}
      alt={props.title}
      className="cursor-pointer"
      onClick={openLightbox}
    />
  );
}

Custom Buttons

You can customize the navigation buttons by providing your own components:

import { Lightbox, type LightboxButtonProps } from "@uxf/ui/lightbox";

function CustomCloseButton(props: LightboxButtonProps) {
  return (
    <button 
      className="my-custom-close-button" 
      onClick={props.onClick}
    >
      Close
    </button>
  );
}

function CustomNextButton(props: LightboxButtonProps) {
  return (
    <button 
      className="my-custom-next-button" 
      onClick={props.onClick}
    >
      Next →
    </button>
  );
}

function CustomPrevButton(props: LightboxButtonProps) {
  return (
    <button 
      className="my-custom-prev-button" 
      onClick={props.onClick}
    >
      ← Prev
    </button>
  );
}

function CustomLightbox() {
  return (
    <Lightbox
      CloseButtonElement={CustomCloseButton}
      NextButtonElement={CustomNextButton}
      PrevButtonElement={CustomPrevButton}
    >
      {/* Your gallery content */}
    </Lightbox>
  );
}

Custom Dialog

For complete customization, you can provide your own dialog component:

import {Lightbox, type LightboxCustomDialogProps} from "@uxf/ui/lightbox";
import {useLightboxDialog} from "@uxf/ui/lightbox/components/use-lightbox-dialog";

function CustomLightboxDialog(props: LightboxCustomDialogProps) {
    const { imageSrc, imageCustomContent, swipableHandlers } = useLightboxDialog({
        imageIndex: props.imageIndex,
        images: props.images,
        onClose: props.onClose,
        onNext: props.onNext,
        onPrev: props.onPrev,
    });

    return (
        <div className="my-custom-lightbox-dialog">
            <button onClick={props.onClose}>Close</button>

            <div className="image-container">
                <img src={currentImage.src} alt={currentImage.title}/>
                {currentImage.customContent && (
                    <div className="custom-content">
                        {currentImage.customContent}
                    </div>
                )}
            </div>

            <div className="navigation">
                <button onClick={props.onPrev}>Previous</button>
                <button onClick={props.onNext}>Next</button>
            </div>
        </div>
    );
}

function CustomDialogLightbox() {
    return (
        <Lightbox DialogElement={CustomLightboxDialog}>
            {/* Your gallery content */}
        </Lightbox>
    );
}

Props

Lightbox Props

| Prop | Type | Description | |------|------|-------------| | children | ReactNode | Content to be rendered inside the Lightbox | | CloseButtonElement | FC<LightboxButtonProps> | Custom close button component | | NextButtonElement | FC<LightboxButtonProps> | Custom next button component | | PrevButtonElement | FC<LightboxButtonProps> | Custom previous button component | | DialogElement | FC<LightboxCustomDialogProps> | Custom dialog component | | isBackdropCloseDisabled | boolean | Disables closing the lightbox when clicking on the backdrop |