Customization

Yet Another React Lightbox allows you to customize pretty much any aspect of its visual appearance. Custom icons can be rendered via render prop. The color palette can be customized through CSS variables. The existing styles can be modified by targeting customization slots.

Customization slots

Yet Another React Lightbox defines the following customization slots that can be targeted either via lightbox styles prop or via corresponding CSS class.

CSS variables

All design-related styles can be overwritten via corresponding CSS variables. Here are some examples of lightbox variables, and you can find the complete list in the lightbox stylesheet.

• --yarl__color_backdrop
• --yarl__color_button
• --yarl__color_button_active
• --yarl__color_button_disabled
• --yarl__slide_title_color
• --yarl__slide_title_font_size
• --yarl__slide_title_font_weight
• --yarl__slide_description_color

Styling

Here are some typical recipes to style the lightbox.

CSS-in-JS

<Lightbox
  styles={{ container: { backgroundColor: "rgba(0, 0, 0, .8)" } }}
  // ...
/>

or

<Lightbox
  styles={{ root: { "--yarl__color_backdrop": "rgba(0, 0, 0, .8)" } }}
  // ...
/>

Global CSS

.yarl__container {
  background-color: rgba(0, 0, 0, 0.8);
}

or

.yarl__root {
  --yarl__color_backdrop: rgba(0, 0, 0, 0.8);
}

Module scoped CSS

import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import styles from "./Component.module.css";

// ...

return (
  <Lightbox
    className={styles.lightbox}
    // ...
  />
);

.lightbox :global(.yarl__container) {
  background-color: rgba(0, 0, 0, 0.8);
}

or

.lightbox {
  --yarl__color_backdrop: rgba(0, 0, 0, 0.8);
}

Adding Toolbar Buttons

To add a button to the toolbar, add a JSX element to the buttons property of the toolbar prop. Be sure to add the string "close" if you want to keep the Close button.

<Lightbox
  toolbar={{
    buttons: [
      <button key="my-button" type="button" className="yarl__button">
        Button
      </button>,
      "close",
    ],
  }}
  // ...
</>

If you have included any plugins that provide their own toolbar buttons, those buttons will be prepended to the front of the buttons list in the order of the plugins prop array. If you need additional flexibility in arranging plugin buttons, you can reference them using corresponding plugin name.

<Lightbox
  toolbar={{
    buttons: [
      "download",
      <button key="my-button" type="button" className="yarl__button">
        Button
      </button>,
      "slideshow",
      "close",
    ],
  }}
  plugins={[Download, Slideshow]}
  // ...
</>

If you need to access information about the current slide when your button is clicked, see the Toolbar Buttons section of the Advanced API documentation.

Custom Icons

You can replace the default icons by providing your custom icons in the render prop.

<Lightbox
  render={{
    iconPrev: () => <MyPrevIcon />,
    iconNext: () => <MyNextIcon />,
    iconClose: () => <MyCloseIcon />,
  }}
  // ...
/>

Hiding Navigation Buttons

To hide the navigation buttons, provide a function returning null in the buttonPrev and buttonNext render props. This can be useful when you want to display just a single slide in the lightbox.

<Lightbox
  carousel={{ finite: slides.length <= 1 }}
  render={{
    buttonPrev: slides.length <= 1 ? () => null : undefined,
    buttonNext: slides.length <= 1 ? () => null : undefined,
  }}
  // ...
/>