Share Plugin

The Share plugin adds a sharing button to the lightbox.

The plugin uses the Web Share API and displays the sharing button in supported browsers.

Documentation

The plugin adds the following Slide properties.

PropertyTypeDescription
share

boolean | string | { url?: string; text?: string; title?: string }

Sharing props. By default, the plugin uses slide.src as the sharing url.

Use string value to specify custom sharing url.

Use object value of the following shape to specify custom props (see Navigator.share() for details):

  • url - a string representing a URL to be shared
  • text - a string representing text to be shared
  • title - a string representing a title to be shared

Use false to indicate non-shareable slides when using custom share function.

Also, the plugin adds the following Lightbox properties.

PropertyTypeDescription
render

{
  iconShare?: () => React.ReactNode;
  buttonShare?: () => React.ReactNode;
}

Custom render functions:

  • iconShare - render custom Share icon
  • buttonShare - render custom Share button
on

{
  share?: ({ index }: { index: number }) => void;
}

Lifecycle callbacks.

  • share - a callback called on slide share
share

{
  share?: ({ slide }: { slide: Slide }) => void;
}

Share plugin settings.

  • share - custom share function

Example

import Lightbox from "yet-another-react-lightbox";
import Share from "yet-another-react-lightbox/plugins/share";

// ...

return (
  <Lightbox
    slides={[
      { src: "/image1.jpg" },
      { src: "/image2.jpg", share: "/image2.png" },
      {
        src: "/image3.jpg",
        share: { url: "/image3.png", title: "Image title" },
      },
    ]}
    plugins={[Share]}
    // ...
  />
);

Live Demo

Sandbox

Edit on StackBlitz