Custom SpreadPlugin breaks Zoom, Share, and Download — looking for guidance on plugin composition

[realrnvr]

Hi! I've built a custom SpreadPlugin for yet-another-react-lightbox that displays two pages side by side (like a book spread). I've run into a few plugin interop issues and wanted to ask for guidance on the intended approach.

1. Zoom plugin stops working on spread slides

My SpreadPlugin augments render.slide and renders two <ImageSlide> components side by side inside a wrapper div. This bypasses ZoomWrapper entirely, so zoom gestures, pinch-to-zoom, and the zoom toolbar buttons all stop working when a spread slide is active.

I've tried capturing the previous render.slide (which is Zoom's augmented version) and delegating each page through it, but I'm not sure if that's the intended pattern for plugins that need to split a single slide into multiple sub-slides. Is there a recommended way to compose with the Zoom plugin in this case?

2. Share and Download plugins are disabled on spread slides

The Share and Download plugins appear to derive the current slide's URL/src from the active slide object directly. Since a spread slide is a custom object (not a standard SlideImage), they can't find a valid src and disable their buttons.

Is there a hook or override (e.g. on the slide object itself, or via render) that lets a custom plugin declare what src/url should be used for sharing and downloading? Or should I be implementing something at the slide data level?

3. General question on sub-slide rendering patterns

Is there an intended way to build plugins that render multiple logical images within a single slide slot — without breaking other plugins that wrap or intercept render.slide? Any guidance on plugin ordering or composition patterns would be really helpful.

plugin snippet:

export function SpreadPlugin({ augment }) {
  augment(({ render, ...restProps }) => ({
    ...restProps,
    render: {
      ...render,
      slide: ({ slide, offset, rect, imageFit, imageProps, render }) => {
        if (!isSpreadSlide(slide)) return undefined;

        const halfRect = rect ? { ...rect, width: rect.width / 2 } : rect;

        return (
          <div
            style={{
              display: "flex",
              width: "100%",
              height: "100%",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            {[slide.first, slide.second].map((page, i) => (
              <div
                key={i}
                style={{
                  height: "100%",
                  display: "flex",
                  alignItems: "center",
                  overflow: "hidden",
                }}
              >
                <ImageSlide
                  slide={page}
                  rect={halfRect}
                  imageFit={imageFit}
                  imageProps={imageProps}
                  render={render}
                  offset={i === 0 ? offset : undefined}
                />
              </div>
            ))}
          </div>
        );
      },
    },
  }));
}

[igordanchenko]

Issue 1 — Zoom

The Zoom plugin currently only supports image slides (see https://yet-another-react-lightbox.com/plugins/zoom#requirements). A spread slide is a custom slide type, so Zoom won't work with it. Even if you made it pretend to be type: "image", things like loading higher-resolution images from srcSet during zoom wouldn't work correctly since Zoom's responsive image logic is tied to a single ImageSlide.

Are you using srcSet images in spread slides, or are you rendering images at their maximum resolution?

Issue 2 — Share and Download

Both plugins resolve the current slide's URL via a fallback chain and support custom slide types out of the box — this is covered in the documentation for https://yet-another-react-lightbox.com/plugins/share and https://yet-another-react-lightbox.com/plugins/download.

The fix: add share and/or download properties directly on spread slide objects:

{ type: "spread", left: {...}, right: {...}, share: leftImage.src, download: leftImage.src }

Or provide custom share / download functions via lightbox props that know how to extract URLs from spread slides (the above option is definitely more straightforward to implement).

Issue 3 — Sub-slide rendering pattern

The intended pattern is the same one the Video plugin uses: define a custom slide type extending GenericSlide, augment SlideTypes, intercept in render.slide, and pass other types through to the previous renderer. There's no built-in mechanism for "sub-slides" — a spread is simply a custom slide type that happens to render two images internally.

[realrnvr]

Thanks!

1. Im not using srcSet. (I want to make sure that the whole spread is zoomable).
2. got it! but how can i make so that i can donwload and share them both.

[igordanchenko]

Im not using srcSet. (I want to make sure that the whole spread is zoomable).

Thanks for clarifying. Since you're not using srcSet, zoom support for spread slides is technically more feasible — but it's still not supported today. I'll keep this in mind as a potential feature request.

got it! but how can i make so that i can donwload and share them both.

For download, you can provide a custom download function via lightbox props that downloads both images:

download={{
  download: ({ slide, saveAs }) => {
    if (slide.type === "spread") {
      saveAs(slide.left.src);
      saveAs(slide.right.src);
    }
  },
}}

Don't forget to add download: true on your spread slide objects so the button stays enabled. Note: I haven't tested whether calling saveAs twice in a row will actually trigger two downloads — you may need to experiment with that.

For share, the Web Share API only accepts a single URL, so you'd need to decide which page to share (or share them sequentially). Alternatively, you can provide a custom share function with your own logic.

See the https://yet-another-react-lightbox.com/plugins/download and https://yet-another-react-lightbox.com/plugins/share plugin docs for more details on custom functions.

[realrnvr]

I believe I can work around to get download and share functionality working — as there are custom functions which are available as you have suggested.

For zoom functionality, As you described — I definitely need its respective feature. Should I open a feature request?

Thank you so much!

EDIT:
A quick update the donwload feature does work when calling saveAs(...) twice and downloads both of the images!

[igordanchenko]

I'm implementing zoom support for custom slide types in #407

[realrnvr]

Thank you so much!

[igordanchenko]

Please take a look at the feature preview version and provide your feedback once you get a chance - #408 (comment)