Issue with the ZoomContent

[aefeakn]

Issue Type

• Bug report
• Feature request
• Question / support request
• Other

Description

Hello, My request is to ability to add svg circles to the zoomed version of the image. For this, I need to access to the html that zoom component is rendered so that I can provide svg to there. That is why "ZoomContent" prop is created I believe. But it does not work for some reason. allow me to show you.

const CustomZoomContent = ({
    buttonUnzoom, // default unzoom button
    modalState,   // current state of the zoom modal: UNLOADED, LOADING, LOADED, UNLOADING
    img,          // your image, prepped for zooming
    //onUnzoom,   // unused here, but a callback to manually unzoom the image and
                  //   close the modal if you want to use your own buttons or
                  //   listeners in your custom experience
  }) => {
    const [isLoaded, setIsLoaded] = useState(false)
  
    useLayoutEffect(() => {
      if (modalState === 'LOADED') {
        setIsLoaded(true)
      } else if (modalState === 'UNLOADING') {
        setIsLoaded(false)
      }
    }, [modalState])
  
    const classCaption = isLoaded
      ? 'zoom-caption zoom-caption--loaded'
      : 'zoom-caption'
  
    return <>
      {buttonUnzoom}
  
      <figure>
        {img}
        <figcaption className={classCaption}>
          That Wanaka Tree, also known as the Wanaka Willow, is a willow tree
          located at the southern end of Lake Wānaka in the Otago region of New
          Zealand.
          <cite className="zoom-caption-cite">
            Wikipedia, <a className="zoom-caption-link" href="https://en.wikipedia.org/wiki/That_Wanaka_Tree">
              That Wanaka Tree
            </a>
          </cite>
        </figcaption>
      </figure>
    </>
  }

<Zoom>
              <img
              src={image.imageThumbnailPath}
              />
              </Zoom>

This is the version I derived from the examples, but src of the image seems to be null, props.image throwns a typeError.
Another version was

<Zoom
                image={{
                  onError: (e) => onErrorImage(e),
                  src: image.imageThumbnailPath,
                  alt: image.imageName,
                  style: { cursor: 'default' }
                }}
                zoomImage={{
                  ZoomContent: CustomZoomContent,
                  src: image.imagePath,
                  alt: image.imageName,
                  style: { width: 'unset' },
                  onClick: zoomInImage
                }}
                isZoomed={state.isZoom}
              />

this does not work either. On final, I need to add some custom html element to this html zoomcontent does not work, how do I do that. Best Regards and thanks

[rpearce]

@aefeakn I'm so sorry for not getting back to you sooner. I can't quite understand your case without an example demonstrating it not working. Could you provide an example in codesandbox.io (or equivalent) so that I can help?