Thumbnails Plugin

Thumbnails plugin adds thumbnails track to the lightbox.

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

Thumbnails Ref

The Thumbnails plugin provides a ref object to control the plugin 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.

CodeSandbox

Edit on CodeSandbox