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>;
  showToggle?: boolean;
  descriptionTextAlign?: "start" | "end" | "center";
  descriptionMaxLines?: number;
}

Captions plugin settings:

  • ref - Captions plugin ref. See Captions Ref for details.
  • 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);

// ...

<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";

// ...

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

Live Demo

You can adjust the live demo settings below.

CodeSandbox

Edit on CodeSandbox