yet-another-react-lightbox

Yet Another React Lightbox provides several optional features through a plugin system. The following plugins are bundled within the main package:

• Captions: Adds support for slide titles and descriptions.
• Counter: Adds a slides counter.
• Download: Adds a download button.
• Fullscreen: Adds support for fullscreen mode.
• Inline: Transforms the lightbox into an image carousel.
• Share: Adds a sharing button.
• Slideshow: Adds a slideshow button.
• Thumbnails: Adds a thumbnails track.
• Video: Adds support for video slides.
• Zoom: Adds an image zoom feature.

For specific configuration and usage details, refer to the documentation for the individual plugin.

The lightbox uses a modular design where features are implemented as React components called Modules. By default, modules are arranged in a tree structure: Portal > NoScroll > Controller (which contains Carousel, Toolbar, and Navigation).

To extend the lightbox, you create Plugins. A plugin is a function that receives methods to manipulate the module tree (like addModule, addChild, replace, etc.) and an augment method to modify lightbox props. Plugins are passed to the plugins prop of the Lightbox component.

Yet Another React Lightbox uses a plugin system to keep the core bundle small. You can add optional features by importing and using specific plugins. Available bundled plugins include:

• Captions: adds support for slide title and description
• Counter: adds slides counter
• Download: adds download button
• Fullscreen: adds support for fullscreen mode
• Inline: transforms the lightbox into an image carousel
• Share: adds sharing button
• Slideshow: adds slideshow button
• Thumbnails: adds thumbnails track
• Video: adds support for video slides
• Zoom: adds image zoom feature

Use the augment method within a plugin to modify the lightbox props before rendering. This is useful for adding toolbar buttons or providing default values for custom props.

Example: Adding a toolbar button

import { addToolbarButton } from "yet-another-react-lightbox";

function MyPlugin({ augment }) {
  augment(({ toolbar, ...restProps }) => ({
    toolbar: addToolbarButton(toolbar, "my-button", <MyButton />),
    ...restProps,
  }));
}

Example: Providing default values for custom props

function MyPlugin({ augment }) {
  augment(({ myProp, ...restProps }) => ({
    myProp: { ...myPropDefaults, ...myProp },
    ...restProps,
  }));
}

To hide the previous and next navigation buttons (for example, when displaying only a single slide), provide a function that returns null to the render.buttonPrev and render.buttonNext props.

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

To use the Thumbnails plugin, you must import the plugin component and its corresponding CSS stylesheet. The plugin provides a thumbnail preview track for image and video slides. For custom slide types, you can provide a thumbnail property directly on the slide object to specify a custom thumbnail image.

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]}
    // ...
  />
);

You can explore the capabilities of yet-another-react-lightbox through the following examples:

• Basic Example: Demonstrates the core lightbox features without any additional plugins.
• Advanced Example: A full-blown implementation with most plugins enabled, including:
  • Captions
  • Fullscreen
  • Slideshow
  • Thumbnails
  • Video
  • Zoom

Install the package using npm:

npm install yet-another-react-lightbox