Counter Plugin

Counter plugin adds slides counter to the lightbox.

The plugin comes with an additional CSS stylesheet.

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

Documentation

Counter plugin adds the following Lightbox properties:

PropertyTypeDescription
counter

{
  separator?: string;
  container?: React.HTMLAttributes​<HTMLDivElement>;
}

Counter plugin settings.

  • separator - custom separator
  • container - HTML div element attributes to be passed to the Counter plugin container

Counter position can be customized via counter.container.style prop.

import Lightbox from "yet-another-react-lightbox";
import Counter from "yet-another-react-lightbox/plugins/counter";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/counter.css";

// ...

return (
  <Lightbox
    plugins={[Counter]}
    counter={{ container: { style: { top: "unset", bottom: 0 } } }}
    // ...
  />
);

Live Demo

Sandbox

Edit on StackBlitz