Download Plugin

Download plugin adds a download button to the lightbox.

Documentation

The plugin adds the following Slide properties.

PropertyTypeDescription

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.

PropertyTypeDescription
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";

// ...

<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

CodeSandbox

Edit on CodeSandbox