Thumbnails Plugin

Thumbnails plugin adds a thumbnail preview to the lightbox. Image and video slides are supported out of the box. You can specify a thumbnail image for custom slide types or override the default thumbnail by adding a thumbnail slide prop to your slides.

The plugin comes with an additional CSS stylesheet.

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

Documentation

Thumbnails plugin adds the following Lightbox properties:

PropertyTypeDescription
thumbnails

{
  ref?: React.ForwardedRef​<ThumbnailsRef>;
  position?: "top" | "bottom" | "start" | "end";
  width?: number;
  height?: number;
  border?: number;
  borderStyle?: string;
  borderColor?: string;
  borderRadius?: number;
  padding?: number;
  gap?: number;
  imageFit?: "contain" | "cover";
  vignette?: boolean;
  hidden?: boolean;
  showToggle?: boolean;
}

Thumbnails plugin settings:

  • ref - Thumbnails plugin ref. See Thumbnails Ref for details.
  • position - thumbnails position
  • width - thumbnail width
  • height - thumbnail height
  • border - thumbnail border width
  • borderStyle - thumbnail border style
  • borderColor - thumbnail border color
  • borderRadius - thumbnail border radius
  • padding - thumbnail inner padding
  • gap - gap between thumbnails
  • imageFit - object-fit setting
  • vignette - vignette effect on the edges of the thumbnails track
  • hidden - if true, thumbnails are hidden when the lightbox opens
  • showToggle - if true, show the Toggle Thumbnails button in the toolbar

Defaults: { position: "bottom", width: 120, height: 80, border: 1, borderRadius: 4, padding: 4, gap: 16, imageFit: "contain", vignette: true }

render

{
  thumbnail?: ({ slide, rect, render, imageFit }: { slide: Slide; rect: ContainerRect; render: Render; imageFit: "contain" | "cover" }) => React.ReactNode;
}

Custom thumbnail render function.

and the following Slide properties:

PropertyTypeDescription
thumbnailstringThumbnail image.

Thumbnails Ref

The plugin provides a ref object to control its features externally.

// Thumbnails ref usage example

const thumbnailsRef = React.useRef(null);

// ...

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

Example

import Lightbox from "yet-another-react-lightbox";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";

// ...

return (
  <Lightbox
    plugins={[Thumbnails]}
    // ...
  />
);

Live Demo

You can adjust the live demo settings below.

Sandbox

Edit on StackBlitz
Please be advised that StackBlitz sandboxes may not work correctly in your browser. StackBlitz currently fully supports only Chromium-based browsers.