Download Plugin

Download plugin adds a download button to the lightbox.

Documentation

The plugin adds the following Slide properties.

Property	Type	Description
download	boolean \| string \| { url: string; filename: string }	Download url or download props. By default, the plugin uses `slide.src` as the download url. Use string value to specify custom download url. Use object value of the following shape to specify custom download url and file name override. `url` - custom download url `filename` - download file name override Use `false` to indicate non-downloadable slides when using custom `download` function.
downloadUrl	string	Deprecated. Use `download` prop instead.
downloadFilename	string	Deprecated. Use `download` prop instead.

Also, the plugin adds the following Lightbox properties.

Property	Type	Description
render	{ iconDownload?: () => React.ReactNode; buttonDownload?: () => React.ReactNode; }	Custom render functions: `iconDownload` - render custom Download icon `buttonDownload` - render custom Download button
on	{ download?: ({ index }: { index: number }) => void; }	Lifecycle callbacks. `download` - a callback called on slide download
download	{ download?: ({ slide, saveAs }: { slide: Slide, saveAs: (source: string \| Blob, name?: string) => void }) => void; }	Download plugin settings. `download` - custom download function

Example

import Lightbox from "yet-another-react-lightbox";
import Download from "yet-another-react-lightbox/plugins/download";

// ...

return (
  <Lightbox
    slides={[
      { src: "/image1.jpg" },
      { src: "/image2.jpg", downloadUrl: "/image2.png" },
      { src: "/image3.jpg", downloadFilename: "puppy_in_sunglasses" },
    ]}
    plugins={[Download]}
    // ...
  />
);

Cross-Origin Images

Depending on your setup, you may run into CORS errors when trying to download cross-origin images in Chrome.

To work around this issue, you can provide the download slide prop that is different from the image url that you render in the lightbox (for example by appending some unique query parameter to the url):

<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={slides.map((slide) => ({
    ...slide,
    download: `${slide.src}?download`,
  }))}
  plugins={[Download]}
/>

Live Demo

Sandbox

Edit on StackBlitz