Close overlay on click outside image

[parad0xe]

No integrated support for closing the viewer when clicking on the overlay.

Temporary fix proposal using an wrapper (In an ImageViewer.tsx file for example):

import { forwardRef, memo, useEffect, useRef, useState } from "react"
import Viewer from "react-viewer"
import ViewerProps from "react-viewer/lib/ViewerProps"

export const ImageViewer = memo(function ImageViewer(props: ViewerProps) {
    useEffect(() => {
        if(props.visible) {
            const handleDocumentClick = (element: PointerEvent) => {
                if((element.target as HTMLElement).parentElement.classList.contains("react-viewer")) {
                    props.onClose()
                }
            }

            document.addEventListener('click', handleDocumentClick)

            return () => {
                document.removeEventListener('click', handleDocumentClick)
            }
        }
    }, [props.visible])

    return <Viewer {...props} />
})