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

{
  descriptionTextAlign?: "start" | "end" | "center";
  descriptionMaxLines?: number;
}

Captions plugin settings:

  • 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.

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
  open={open}
  close={() => setOpen(false)}
  slides={[{ src: "/image1.jpg", title: "Slide title", description: "Slide description" }]}
  plugins={[Captions]}
/>

Live Demo

CodeSandbox

Edit on CodeSandbox