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

// ...

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.

CodeSandbox

Edit on CodeSandbox