Captions Plugin

Captions plugin allows you to add titles and descriptions to your lightbox slides.

The plugin comes with an additional CSS stylesheet.

import "yet-another-react-lightbox/plugins/captions.css";

Documentation

Captions plugin adds the following Lightbox properties:

PropertyTypeDescription
captions

{
  ref?: React.ForwardedRef​<CaptionsRef>;
  hidden?: boolean;
  showToggle?: boolean;
  descriptionTextAlign?: "start" | "end" | "center";
  descriptionMaxLines?: number;
}

Captions plugin settings:

  • ref - Captions plugin ref. See Captions Ref for details.
  • hidden - if true, captions are hidden when the lightbox opens
  • showToggle - if true, show the Captions Toggle button in the toolbar
  • descriptionTextAlign - description text alignment
  • descriptionMaxLines - maximum number of lines to display in the description section

Defaults: { descriptionTextAlign: "start", descriptionMaxLines: 3 }

and the following Slide properties:

PropertyTypeDescription
titleReactNodeSlide title.
descriptionReactNodeSlide description.

Captions Ref

The Captions plugin provides a ref object to control the plugin features externally.

// Captions ref usage example

const captionsRef = React.useRef(null);

// ...

return (
  <Lightbox
    plugins={[Captions]}
    captions={{ ref: captionsRef }}
    on={{
      click: () => {
        (captionsRef.current?.visible
          ? captionsRef.current?.hide
          : captionsRef.current?.show)?.();
      },
    }}
    // ...
  />
);
PropertyTypeDescription
visibleboolean
If true, captions are visible.
show() => voidShow captions.
hide() => voidHide captions

Example

import Lightbox from "yet-another-react-lightbox";
import Captions from "yet-another-react-lightbox/plugins/captions";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/captions.css";

// ...

return (
  <Lightbox
    plugins={[Captions]}
    slides={[
      {
        src: "/image1.jpg",
        title: "Slide title",
        description: "Slide description",
      },
      // ...
    ]}
    // ...
  />
);

Live Demo

You can adjust the live demo settings below.

Sandbox

Edit on StackBlitz