Zoom plugin with custom render

[Marmsilso]

I have two diferent lightboxes in my page, one for image gallery and another for a pdf

i am loading the images with the slides prop
for the pdf, im using a custom render function

i was having issues with the zoom (the buttons would be disabled) on the gallery lightbox until i found the solution: #9 (reply in thread)

however, the same solution did not work and the issue remains on the pdf lightbox, i believe its related to the custom render

im using react-pdf to display the pdf

<Lightbox 
     open={open}
     plugins={[Zoom]}
     zoom={{
         maxZoomPixelRatio: 10,
         scrollToZoom: true
     }}
     close={() => setOpen(false)}
     slides={[{ src: "" }]}
     carousel={{ finite: true, preload: 2 }}
     animation={{ fade: 600, swipe: 500 }}
     render={{
         slide: () => <PdfViewer url={props.pdf ? props.pdf : ""} />,
         buttonPrev: () => null,
         buttonNext: () => null,
    }}
/>

<PdfViewer> is a custom component with react-pdf inside of it

am i doing something wrong?

[igordanchenko]

Zoom plugin currently supports only standard image slides and doesn't work with video or custom slides. While I'm sure it's possible to support custom slides, I feel it would require some considerable refactoring. Will you be open to poking around and contributing a PR?

[bjornhansen]

The current Zoom plugin documentation mentions it is compatible with custom render functions, see quote below. Has this changed since your last reply @igordanchenko?

I'm trying to display a simple component that overlays some elements on an image, so using a standard image slide won't work for my use case. I'm currently having the same issue @Marmsilso had, which is the zoom just appears to be disabled, regardless of the child element's size.

Zoom plugin adds the following Lightbox properties.
...
Custom render functions:

• slide - Zoom plugin adds zoom and maxZoom props to the slide render function
• buttonZoom - render custom Zoom In / Zoom Out control
• iconZoomIn - render custom Zoom In icon
• iconZoomOut - render custom Zoom Out icon

[igordanchenko]

@bjornhansen I do not see a contradiction here. Zoom plugin still supports only image slides, but you can use custom render function to render your images as long your image slides provide src, width and height attributes. This is completely different use case from custom slides that the OP was inquiring about.

[bjornhansen]

Okay, thank you for the prompt clarification! I appreciate your great work on yarl. 🙌

My use case is displaying an image with HTML/CSS bounding boxes overlaid for a computer vision project. I'm not sure how common this is, so may not be worth refactoring for.

For any who need something like this and wander by here, I'm trying another library more specific to this kind of functionality: react-zoom-pan-pinch.